JavaScript中的原型链prototype介绍
作者:bea
JavaScript中的继承是通过原型链(prototype chain)来完成的:每个对象内部都有另外一个对象作为其prototype而存在,对象从这个prototype中继承属性(property)。对于每个对象来说,可以用以下三种方式来访问其原型对象: 1.__proto__。可以通过对象的__proto__属性来访问其原型对象。该属性仅在Firefox、Safari和Chrome中得到支持,在IE和Opera中不支持。 2.Object.getPrototypeO
JavaScript中的继承是通过原型链(prototype chain)来完成的:每个对象内部都有另外一个对象作为其prototype而存在,对象从这个prototype中继承属性(property)。对于每个对象来说,可以用以下三种方式来访问其原型对象:
1.__proto__。可以通过对象的__proto__属性来访问其原型对象。该属性仅在Firefox、Safari和Chrome中得到支持,在IE和Opera中不支持。
2.Object.getPrototypeOf()。可以将对象作为参数传入Object.getPrototypeOf()方法,执行后即返回对象的原型对象。此方法仅在ECMAScript 5标准中得到支持。
3.o.constructor.prototype。通过先获取对象的constructor函数,然后再通过访问constructor函数的prototype属性来访问到原型对象。使用此方法的前提为:对象中存在指向构造函数的constructor属性。
判断两个对象间是否存在原型链关系可以使用isPrototype()方法:
代码如下:
var p = {x:1};
var o = Object.create(p);
console.log(p.isPrototypeOf(o));//true
对于所有用字面量创建的对象而言,其prototype对象均为Object.prototype(作为一个特殊对象,Object.prototype没有原型对象):
代码如下:
var x = {a:18, b:28};
console.log(x.__proto__);//Object {}
而对于所有用new操作符创建的对象而言,其prototype对象均为constructor函数的prototype属性:
代码如下:
var x = {a:18, b:28};
function Test(c){
this.c = c;
}
Test.prototype = x;
var t = new Test(38);
console.log(t);//Object {c=38, a=18, b=28}
console.log(t.__proto__);//Object {a=18, b=28}
console.log(t.__proto__.__proto__);//Object {}
JavaScript中使用new操作符创建对象的过程如下:
1.创建一个新的空对象。 2.将这个对象的__proto__属性指向constructor函数的prototype属性。 3.将这个对象作为this参数,执行constructor函数。
从上述创建过程可以得出结论:所有从同一个constructor函数中构造出来的对象,其__proto__属性(也即其原型对象)相等,也就是说,只存在一个原型对象:
代码如下:
var t = new Test(38);
var t2 = new Test(68);
console.log(t === t2);//false
console.log(t.__proto__ === t2.__proto__);//true
有用 | 无用
1.__proto__。可以通过对象的__proto__属性来访问其原型对象。该属性仅在Firefox、Safari和Chrome中得到支持,在IE和Opera中不支持。
2.Object.getPrototypeOf()。可以将对象作为参数传入Object.getPrototypeOf()方法,执行后即返回对象的原型对象。此方法仅在ECMAScript 5标准中得到支持。
3.o.constructor.prototype。通过先获取对象的constructor函数,然后再通过访问constructor函数的prototype属性来访问到原型对象。使用此方法的前提为:对象中存在指向构造函数的constructor属性。
判断两个对象间是否存在原型链关系可以使用isPrototype()方法:
代码如下:
var p = {x:1};
var o = Object.create(p);
console.log(p.isPrototypeOf(o));//true
对于所有用字面量创建的对象而言,其prototype对象均为Object.prototype(作为一个特殊对象,Object.prototype没有原型对象):
代码如下:
var x = {a:18, b:28};
console.log(x.__proto__);//Object {}
而对于所有用new操作符创建的对象而言,其prototype对象均为constructor函数的prototype属性:
代码如下:
var x = {a:18, b:28};
function Test(c){
this.c = c;
}
Test.prototype = x;
var t = new Test(38);
console.log(t);//Object {c=38, a=18, b=28}
console.log(t.__proto__);//Object {a=18, b=28}
console.log(t.__proto__.__proto__);//Object {}
JavaScript中使用new操作符创建对象的过程如下:
1.创建一个新的空对象。 2.将这个对象的__proto__属性指向constructor函数的prototype属性。 3.将这个对象作为this参数,执行constructor函数。
从上述创建过程可以得出结论:所有从同一个constructor函数中构造出来的对象,其__proto__属性(也即其原型对象)相等,也就是说,只存在一个原型对象:
代码如下:
var t = new Test(38);
var t2 = new Test(68);
console.log(t === t2);//false
console.log(t.__proto__ === t2.__proto__);//true
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- javascript 操作符(~、&、|、^、<<、>>)使用案例
- JavaScript中的逻辑判断符&&、||与!介绍
- JavaScript中的eval()函数使用介绍
- JSONP跨域GET请求解决Ajax跨域访问问题
- JavaScript中的异常捕捉介绍
- JavaScript中对象介绍
- JavaScript中用字面量创建对象介绍
- javascript设计模式之中介者模式Mediator
- javascript实现window.print()去除页眉页脚
- Javascript访问器属性实例分析
- Javascript中数组sort和reverse用法分析
- jQuery中:visible选择器用法实例
- JQuery设置时间段下拉选择实例
- jQuery中:hidden选择器用法实例
- jQuery中:has选择器用法实例
- jQuery中:empty选择器用法实例
- jQuery中:contains选择器用法实例
- 解决ueditor jquery javascript 取值问题
- jQuery中:focus选择器用法实例