JavaScript中的prototype原型学习指南(2)

function Person(){ .... } Person.prototype.name = "jiangshui"; Person.prototype.sayName = function(){ alert(this.name); }; var person1 = new Person(); person1.sayName(); //jiangshui

或者

Person.prototype = { constructor : Person, name : "jiangshui", sayName : function(){ alert(this.name); } };

第二种方法覆盖了整个 prototype 对象,所以需要手动指定 constructor 属性,指向构造函数否则会指向 Object。

梳理一下它们的关系:

Person.prototype -》 原型对象,可以定义一些属性或者参数,被所有实例共用。

Person.prototype.constructor == Person —》 原型对象有个默认的属性 constructor 指向该原型对象所属的构造函数(注意另一种写法会覆盖掉这个属性,需要重新指定)。

person1 = new Person() -》构造函数生成实例,实例包含了构造函数的内容和原型对象的内容。

person1.__proto__ -》指向创建这个实例的原型对象(不规范,不要用)。

使用 isPrototypeOf() 可以确定对象之间的关系。例如:

Person.prototype.isPrototypeOf(person1);

当代码读取某个对象的某个属性,会执行搜索。先从当前对象开始,如果没有,则搜索指针指向的原型对象,而不会搜索构造函数。对象实例可以访问但是不能重写原型对象的值。如果实例中设置了与原型对象同名的属性,则搜索过程,在实例中结束而不会访问原型对象,所以达到覆盖的目的。因此即使这个属性设置为 null,也表示在实例中已经存在该属性,而不会取消掉这个属性,从而可以访问原型对应属性。

所以需要使用 delete 操作符,完全删除实例属性,从而可以重新访问原型。

原型是动态的,对原型对象所做的任何修改,都能立即从实例上反映出来。原因是实例与原型之间的松散链接关系,每次调用实例的属性方法,都会进行一次查询,如果原型变了,查询结果也就变了。

了解原型之后,我们也可以对原生对象添加新方法或属性。Object、Array、String 等原生引用类型,与上面构造函数类似,我们可以用 prototype 扩充它们的方法。例如:

String.prototype.startsWith = function(text){ return this.indexOf(text) == 0; }; var msg = "Hello World"; msg.startsWith("Hello");

这段代码为 String 这个原生引用类型,增加了一个 startsWith 方法,功能就是传递进去一个参数,看看要测试的字符串是否以参数开始。由于原型的动态性,所以只要执行一下,所有字符串类型的变量全都获得了这个方法。

但是不推荐使用这个方法,如果用的太多,代码太多,会导致维护困难、代码混乱等情况。一般情况下,会先继承某个原生引用类型,然后再在新自定义的类型上创建。关于继承,后面会再总结。

原型模式也不是万能的,原型中的所有属性和方法是被所有实例共享的,所以对于函数之类非常合适,而对于包含引用类型的属性来说,就会产生一些冲突。例如:

function Person(){} Person.prototype = { constructor : Person, friends : ["greg","jack"] }; var person1 = new Person(); var person2 = new Person(); person1.friends.push("tom"); console.log(person2.friends);

你会在 console 中看到,person2 的 friends 多了一个 tom,这并不是我想要的,但是对 person1 定义他的朋友时,的确影响到了实例 person2。

所以我们要结合原型模式和构造函数模式来使用。

组合使用构造函数模式和原型模式

这就是最常用的模式,构造函数用来定义实例属性,通过传递参数实现自定义;原型用来定义方法或者需要所有实例共享的属性。这样,既实现了自定义,又保证了共用,还避免了问题。

function Person(name, age, job){ this.name = name; this.age = age; this.job = job; this.friends = ["greg","jack"]; } Person.prototype = { constructor : Person, sayName : function(){ alert(this.name); } }; var jiangshui = new Person("jiangshui","22","engineer");

实际应用示例

OK,到了这里,你可能会看懂原型是啥,以及如何创建对象,可是,这些又有什么用?确实,我之前的工作,一直也就是用 jQuery 写一些代码就可以了,根本用不到封装然后生成对象实现功能等。那这些究竟有什么用?

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

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