js中的原型理解

xiaoxiao2021-02-28  76

以上是第一种状态:对应的js代码如下

function Person() { }

Person函数中有一个prototype的属性指向Person的原型对象,在原型对象中有一个construct的属性指向了Person函数,所以可以通过new Person() 来创建对象。

以上是第二种状态用过Person.prototype.name为原型设置值之后,这些属性和方法都是设置在Person的原型中的。js代码如下:

Person.prototype.name = "Leon"; Person.prototype.age = 22; Person.prototype.say = function() { alert(this.name + "," + this.age); }

第三种状态 是,当时用Person创建对象之后,会在对象中有一个prop 属性(这个属性是不能被访问的)指向了Person原型,当使用对象调用原型的时候,首先会在对象中查找是否有这个属性,如果没有在通过prop 去原型中找该属性,所以在调用p1.say(),在自己空间找不到这个方法就会去原型中寻找,找到之后完成say()方法的调用。js代码如下:

var p1 = new Person(); p1.say(); //以下方式是可以检测出p1是否有_prop_指向Person原型 alert(Person.prototype.isPrototypeOf(p1));

第四种状态,当创建了一个新的p2之后,依然会有一个prop 属性只想Person原型,之后如果有通过p2.name设置了属性之后,会在对象自己的内存空间存储name的值,当调用say法去寻找name的值时,先在自己的对象空间找到之后,就不会去原型中查找了(特别注意原型中的值是不会被替换的,仅仅只是在查找时暂时被覆盖而已)。js代码如下:

var p2 = new Person(); //在自己的内存空间赋值 p2.name = "Som"; p2.say(); //这里的name是原型中的name值 p1.say();

原型的重写模型(在new之后重写)

function Person(name, age){ } var p1 = new Person(); Person.prototype.sayHi = { alert(this.name + "," + this.age); } Person.prototype = { constructor:Person, name:"Leno", age:22, say:function(){ alert(this.name + "," + this.age); } } p1.sayHi();//不会报错但是name没有定义只有函数 var p2 = new Person(); p2.sayHi();//会报错,因为新创建的p2在原型重写之后没有指向原来的原型,//所以不存在sayHi()函数 p2.say();//正确的
转载请注明原文地址: https://www.6miu.com/read-33950.html

最新回复(0)