浅谈JavaScript中的原型模式

JS对象创建与原型模式
本文介绍了JavaScript中创建对象的方法,包括工厂模式和原型模式,并详细解析了原型模式的工作原理,探讨了实例、原型对象及构造函数之间的关系。

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

<pre name="code" class="html">//工厂模式
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 person = createPerson('dw',20,'IT');

其等价的原型模式:

function Person()
{

}
Person.prototype = 
{
	name:"dw",
	age:20,
	job:"IT",
	sayName:function()
	{
		alert(this.name);
	}
};
var person2 = new Person;

    在Javascript中。每一个函数都有prototype属性。该属性是一个指向原型对象的指针,能够用于创建全部实例共享的属性的和方法。在原型模式下,在创建一个实例person3

var person3 = new Person;
person2.name;  //dw
person3.name; //dw

person2和person3的name属性都返回dw。原型对象的属性和方法被全部特定类型的实例共享。在默认的情况下。每一个原型对象会自己主动获得一个constructor属性,用于指向prototype属性所在函数的指针。如Person.prototype.constructor指向Person

alert(Person.prototype.constructor);   //返回Person的构造函数
//Person.prototype.constructor仅仅是指向Person的一个指针,与Person并不相等
//下面均返回false
alert(Person.prototype.constructor === Person)
alert(Person.prototype.constructor == Person)

实例、原型对象、构造函数的三角恋关系例如以下图所看到的:

在每个实例的内部都有一个指针指向原型对象,在ECMA-262的第五版称之为[[prototype]]。

在原型模式下创建的实例与构造函数没有直接的关系。


     尽管无法訪问[[prototype]],但能够用isPrototypeOf()方法来确定对象是否是原型对象。

alert(Person.prototype.isPrototypeOf(person2)); //true
alert(Person.prototype.isPrototypeOf(person3));//true

由于在实例内部均有一个指向Person.prototype的指针,所以均返回true。

在ECMAScript 5中,能够用Object.getPrototypeOf()返回[[prototype]],即返回原型对象

alert(Object.getPrototypeOf(person2) == Person.prototype);  //true
alert(Object.getPrototypeOf(person2).name); //dw

    注意:尽管能够用实例訪问原型中的值,可是不能通过实例重写原型中的值。即实例中加入了与原型中同名的属性,则原型的同名属性被屏蔽。

person2.name="qs";
alert(person2.name);//qs

即使将name属性设置为null,仍然不能訪问原型中的name。

能够用delete删除实例的name属性。则能够又一次訪问原型中的name.

<pre name="code" class="html">person2.name = null;
alert(person2.name);  //null
delete person2.name;alert(person2.name); //dw


    对于同名属性,能够用hasOwnProperty("propertyName")方法检測属性是属于实例还是原型,该方法仅仅有在给定的属性存在实例中时才返回true


转载于:https://www.cnblogs.com/brucemengbm/p/6826283.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值