这种模式抽象了创建具体对象的过程,由于ES6之前无法创建类,我们以函数封装的形式进行实现。 代码如下:每次调用dog_2这个函数,都直接新建一个对象,然后为该对象添加属性和方法。
function dog_2(name,weight){ let o=new Object(); o.name=name; o.weight=weight; o.bark=function(){ console.log(this.name+"体重为"+this.weight+"kg"); console.log("汪汪汪"); } return o; } dog2=dog_2("yangxuan",10); dog2.bark(); console.log(dog1 instanceof dog_2); //false console.log(dog1.constructor==dog_2); //false这种模式对于学过cpp、java的同学来说应该很好理解。js中也可以通过创建特定的构造函数来创建对象,类似于Array等的原生构造函数,我们可以自定义一个构造函数,在其中定义对象的属性和方法。 代码如下:
function Dog(name,weight){ this.name=name; this.weight=weight; this.bark=function(){ console.log(this.name+"体重为"+this.weight+"kg"); console.log("汪汪汪"); } } dog1=new Dog("yangxuan",10); dog1.bark(); console.log(dog1 instanceDof dog); //true console.log(dog1.constructor==dog); //true我们创建的每个函数都有一个prototype属性----原型。它本身是一个指针,指向某一个对象。这个对象的作用就是可以包含所有实例共享的属性和方法。可以理解为,这个对象(原型对象)的属性和方法可以被通过这个构造函数实例化出来的其他对象共享。通过这种方式,可以解决方法2中所说的问题。 代码如下:每次调用pig这个函数,都直接新建一个对象,然后为该对象添加属性和方法。
function pig(){ } pig.prototype={ constructor:pig, this.name='佩奇'; this.age=10; this.weight=110; sayname:function(){ console.log(this.name); //如果使用箭头函数的this指向会出现问题(?) } } let peiqi=new pig(); peiqi.sayname();看过上面方法二与方法三之后,理解了他们各自的优缺点,话不多说,我们直接看代码 代码如下:
function pig(name,age,weight){ this.name=name; this.age=age; this.weight=weight; } pig.prototype={ constructor:pig, sayname:function(){ console.log(this.name); //如果使用箭头函数的this指向会出现问题(?) } } let peiqi=new pig("peiqi",10,100); peiqi.sayname();将上述方法的原型模式封装在构造函数之中,通过判断某个方法是否存在来决定要不要需要初始化原型对象。 代码如下:
function pig(name,age,weight){ this.name=name; this.age=age; this.weight=weight; if (typeof this.sayname!="function"){ console.log(this.name); //如果使用箭头函数的this指向会出现问题(?) } } let peiqi=new pig("peiqi",10,100); peiqi.sayname();在上述方法不使用的情况下使用寄生构造函数的形式。 这种模式的基本思想就是创建一个构造函数,该函数的作用仅仅是封装创建对象的代码,然后返回新创建的对象,但是表面上看这个函数又像是一个典型的构造函数。 代码如下:
function pig(name,age,weight){ let o=new object(); o.name=name; o.age=age; o.weight=weight; o.sayname=function{ console.log(this.name); //如果使用箭头函数的this指向会出现问题(?) }; return o; } let peiqi=new pig("peiqi",10,100); peiqi.sayname();