js工厂、构造函数、原型模式的学习

小人头
96 阅读3分钟

学习笔记(大白话)： #####1.工厂模式 理解:该模式抽象了创建具体对象的过程

function createPerson(name,age,obj){
	var o = new Object();
	o.name = name;
	o.age = age;
	o.obj = obj;
	o.sayName = function(){
		console.log(this.name)
	}
}
var person = createPerson("小人头",18,"it")
var person1 = createPerson("小人头",18,"it")

createPerson可以接受一些参数。返回一个带有特定属性的对象； 弊端:工厂模式虽然解决了创建多个相似对象的问题，但却没有解决对象识别的问题(既怎样知道一个对象的类型) 有问题那就需要 去解决--就有了新的模式出现

#####构造函数模式 我们平常使用到的-Object、Array都是构造函数(原生构造函数)。运行时，自动就生成在运行环境中(亲妈养的)。当然我们也可以创建自定义的构造函数,自定义对象类型的属性和方法。将上面例子进行修改

function Person(bane,age,job){
	this.name = name;
	this.age = age;
	this.job= job
	this.sayName = function(){
		console.log(this.name)
	}
}
var person1  =  new Person("小人头",18,"it")

2个代码都实现了创建对象的过程，里面代码基本一致。但是我们比较下构建函数的区别:

  • 1.没有显示的创建一个对象
  • 2.直接将属性和方法赋值给了this
  • 3.没有return 语句

要创建Person的实例必须通过 new 来实现，这时候我们代码会经历下面的顺序

  • 1.创建1个新的对象
  • 2.将构造函数的作用域赋值给新的对象(this就指向了新的对象)
  • 3.指向构造函数内的代码
  • 4.返回新的对象

刚才说也说了构造函数模式比工厂模式多了判断类型的能力-我们如何判断呢 用到一个instanceof 进行检查类型

person1 instanceof Object //true
person1 instanceof Person //true

算是一个发展历史吧--

#####3.构造函数使用注意和普通函数区别 可能很多人会想着。什么就算是构造函数--答案:通过new 操作符来调用的都算作构造函数。 那构造函数和普通函数使用有何区别呢--我们用上面例子来说明

//当做构造函数使用；
var person = new Person("小明",18,"it");
person.name //小明

//当做普通函数使用
Person("小明",18,"it");
window.name//小明

//在其他对象中使用
var o = new Object();
Person.call(o,"小明",18,"it")
o.name//小明

通过上面例子。我们其实就可以看出来使用后差别；当做普通函数使用 我们的函数内的属性指向的是全局对象 既window，在使用call时候 属性就指向了O对象 这边其实算是小细节吧--可能大家都知道 记录一下；

#####4.构造函数的劣势 这边简单说下-上面的例子中。我们有sayName的一个函数 缺点就是从这来的了---->我们每构造一个实例时。就需要在实例上重新创建一遍这个sayName这个方法,创建了就需要创建对象(函数也是对象) 我的理解就是可能资源的浪费吧 然后我们可以优化一波-就是把sayName这个方法给提出来--那我们每个实例就不需要重新创建了方法函数了

function perSon(name,age,jon){
      ......//代码依旧
      this.sayName = sayName；
}
sayName(){
  console.log(this.name)
}

这样算是得到可优化---但是sayName这个方法就成了全局对象了。 其实也挺low得---于是乎就出现了一个新的模式

#####5.原型模式 每个函数都有一个 prototype属性--这个呢是指向原型对象的-这个后面会写关于原型对象的文章 就会理解了(理解为底层机制吧) 我们可以用下面代码实现比较好的写法

function Person(){
}
person.prototype.name = "小明";
person.prototype.age = 18;
Person.prototype.sayName= function(){
	console.log(this.name)
}
var person = new Person()
person.name // 小明

上面代码意思就是创建一空函数--将所有的属性和方法放置到 原型对象上面。所有的实例 都可以共享他们；也是一种模式

今天学习笔记记录到此

avatar
文章
阅读
粉丝