PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

浅谈JavaScript中的原型模式

高洛峰
高洛峰 原创
2016-11-25 09:27:45 1033浏览

    在javascript中创建对象由很多种方式,如工厂模式、构造函数模式、原型模式等:

//工厂模式<br>function createPerson(name,age,job)<br>{<br>	var o = new Object;<br>	o.name = name;<br>	o.age = age;<br>	o.job = job;<br>	o.sayName = function()<br>	{<br>		alert(this.name);<br>	}<br>		return o;<br>}<br>var person = createPerson('dw',20,'IT');<br><p>其等价的原型模式:</p><p></p><p>function Person()<br>{<br><br>}<br>Person.prototype = <br>{<br>	name:"dw",<br>	age:20,<br>	job:"IT",<br>	sayName:function()<br>	{<br>		alert(this.name);<br>	}<br>};<br>var person2 = new Person;<br><br>    在Javascript中,每个函数都有prototype属性,该属性是一个指向原型对象的指针,可以用于创建所有实例共享的属性的和方法。在原型模式下,在创建一个实例person3</p><p></p><p>var person3 = new Person;<br>person2.name;  //dw<br>person3.name; //dw<br><br>person2和person3的name属性都返回dw。原型对象的属性和方法被所有特定类型的实例共享。在默认的情况下,每个原型对象会自动获得一个constructor属性,用于指向prototype属性所在函数的指针,如Person.prototype.constructor指向Person</p><p></p><p>alert(Person.prototype.constructor);   //返回Person的构造函数<br>//Person.prototype.constructor只是指向Person的一个指针,与Person并不相等<br>//以下均返回false<br>alert(Person.prototype.constructor === Person)<br>alert(Person.prototype.constructor == Person)<br><br>实例、原型对象、构造函数的三角恋关系如下图所示:</p><p><img src="https://img.php.cn//upload/image/628/727/400/1480037228955873.png" title="1480037228955873.png" alt="0827214828b3486d2d_13_0.png"></p><p>在每一个实例的内部都有一个指针指向原型对象,在ECMA-262的第五版称之为[[prototype]]。在原型模式下创建的实例与构造函数没有直接的关系。</p><p>     虽然无法访问[[prototype]],但可以用isPrototypeOf()方法来确定对象是否是原型对象。</p><p></p><p>alert(Person.prototype.isPrototypeOf(person2)); //true<br>alert(Person.prototype.isPrototypeOf(person3));//true<br><br>因为在实例内部均有一个指向Person.prototype的指针,所以均返回true。在ECMAScript 5中,可以用Object.getPrototypeOf()返回[[prototype]],即返回原型对象</p><p></p><p>alert(Object.getPrototypeOf(person2) == Person.prototype);  //true<br>alert(Object.getPrototypeOf(person2).name); //dw<br><br>    注意:虽然可以用实例访问原型中的值,但是不能通过实例重写原型中的值,即实例中添加了与原型中同名的属性,则原型的同名属性被屏蔽。</p><p></p><p>person2.name="qs";<br>alert(person2.name);//qs<br><br>即使将name属性设置为null,仍然不能访问原型中的name。可以用delete删除实例的name属性,则可以重新访问原型中的name.</p><p></p><p></p><pre name="code" class="html">person2.name = null;<br>alert(person2.name);  //null<br>delete person2.name;alert(person2.name); //dw<br><br><p><br>    对于同名属性,可以用hasOwnProperty("propertyName")方法检测属性是属于实例还是原型,该方法只有在给定的属性存在实例中时才返回true</p>
声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。