JavaScript中的prototype原型学习指南

Function 类型有一个属性 prototype,直接翻译过来就是原型。这个属性就是一个指针,指向一个对象,这个对象包含一些属性和方法,这些属性和方法会被当前函数生成的所有实例(对象)所共享。

这句话根据前面所说的,细细琢磨下来,就可以得到下面代码:

function Person(){ ... } Person.prototype = { country : 'china', sayName : function(){ ... } }

先创建了一个 Function 类型的实例 person,然后 person 的方法 prototype 是一个对象,就声明指向了一个对象。这个对象里面的属性和方法,会被当前 person 函数生成的实例所共享。也就是说:

person1 = new Person(); person2 = new Person();

person1 和 person2 都是通过 Person 这个 Function 类型实例,再次生成的实例,它们俩都有共同的属性 country 和方法 sayName,因为它们都有某个指针(__proto__),直接指向 Person.prototype 所指向的对象。不过要注意 __proto__ 这个指针是不标准的,只有 Chrome 和 Firefox 等浏览器自己定义的,实际中,也不会用到这个属性,只是作为理解 prototype 来用:

201659145452510.png (668×270)

关于原型等用法,后面会更具体的讲到。

创建对象的模式

下面,我们就来看下创建对象的方法和常用模式,以及它们之间的优缺点。

1.工厂模式

就像工厂一样,抽象了创建具体对象的过程,用函数来封装以特定接口创建对象的细节。通过使用函数代替部分重复工作,代码如下:

function createPerson(name, age, job){ var o = new Object(); o.name = name; o.age = age; o.job = job; o.sayName = function(){ alert(this.name); }; return o; } var person1 = createPerson("jiangshui","22","engineer");

这样就创建出来了一个人,工厂模式解决了多个相似对象重复创建问题,但是没有解决对象识别问题。只是单纯的创建了一个对象,而不管这个对象是从人类模版还是动物模版创建的,无法区分这个对象的类型。

2.构造函数模式

创建一个自定义的构造函数,从而定义自定义对象类型的属性和方法。

function Person(name, age, job){ this.name = name; this.age = age; this.job = jpb; this.sayName = function(){ alert(this.name); }; }; var person1 = new Person(...);

3.构造函数模式与工厂模式区别:

没有显式的创建对象。

直接将属性和方法赋值 this 对象。

没有 return 语句。

Person 是 Function 类型的对象,new 之后,会继续产生一个对象,但这个新产生的对象,由于在函数中传递进去参数,并赋值给了 this 指针,那么传递进去的内容,就变成了新产生对象的属性或方法。

构造函数默认习惯是首字母大写,上面代码执行经历了下面几个步骤:

创建一个新对象

将构造函数作用域赋值给新对象

执行构造函数中的代码

返回新对象

这样生成的实例中,都默认包含一个 constructor 属性指向构造函数,例如:

alert(person1.constructor == Person);

所以用构造函数模式,有类型的区分,可以将它的实例标识为一种特定的类型。

此外,构造函数就是普通的函数,因为要反馈得到新对象,所以用 new 来调用。如果不用的话,直接执行就跟普通函数一样,例如上面,执行 Person.sayName() 会弹出 window.name,因为函数在 window 下面执行,所以 this 指向 window。

构造函数模式也是有缺陷的,构造函数模式里面的方法,在每个实例上都重新创建了一遍,因此不同实例上的同名函数是不相等的。例如:

person1.sayName == person2.sayName; //false

也就是说,由构造函数生成的每个对象实例,属性和方法都是独有的,都是复制了一遍。属性独有是必须的,因为这正是对象之间不同的地方,但是很多方法功能和代码都是一样的,重复复制多次,显然就会浪费资源。

所以我们可以把函数放在外面,然后在构造函数里面,用指针指向这个函数,那么生成的实例中,方法存储的就是一个指向某函数的指针,也就共用一个函数了:

function Person(name, age){ this.name = name; this.age = age; this.sayName = sayName; } function sayName(){ alert(this.name); }

但是这样,这个函数就变成了全局函数,而且与 Person 构造函数关联性不强,没有封装性可言。

下面有请原型模式登场。

原型模式

前面已经介绍了一部分关于原型的基础知识。简单的说,就是每个函数都有一个 prototype 属性,指向一个对象(原型对象),这个对象里面可以放一些属性或者方法。然后这个函数生成的实例,会有一个不规范的属性(__proto__)指向原型。

由此来看,你应该可以理解:prototype 产生的属性和方法是所有实例共享的。

这样正好解决了上面构造函数模式中,实例中函数的共用问题。例如下面代码:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzpxpp.html