图解js原型对象、原型链

在Javascript中，万物皆对象，所以想要理解原型对象和原型链，我们首先要对对象有深刻的理解，JS中对象大致可以分为两类，即：普通对象Object 和函数对象Function。一般而言，通过new Function产生的对象是函数对象，其他对象都是普通对象。

在开始本文之前，首先牢牢记住两个基本：①但凡创建了对象（无论是函数对象还是普通对象），都自带一个_proto_属性，可称为隐式原型，一个对象的隐式原型指向构造该对象的构造函数的原型，这也保证了实例能够访问在构造函数原型中定义的属性和方法。②其中函数对象除了和其他对象一样有上述_proto_属性之外，还有自己特有的属性——原型属性（prototype），这个属性是一个指针，指向一个对象，这个对象的用途就是包含所有实例共享的属性和方法（我们把这个对象叫做原型对象）。原型对象也有一个属性，叫做constructor，这个属性包含了一个指针，指回原构造函数。然后基于这个两个基本，我们开始走代码

1)普通对象的创建：

var obj={

x:1,

y:2

}

图解js原型对象、原型链

当Obj一创建成功，就形成如图结构,在这个对象中，在上面的代码中我们没有为_proto_指定它的指向，所以为默认值

通过对象字面量构造出的对象，其[[prototype]]指向Object.prototype

我们进一步来创建一个复杂的对象

var a= {
x: 1,
add: function (z) {
return this.x + this.y + z
}
};
var b = {
y: 2,
__proto__: a
};

var c = {
y: 3,
__proto__: a
};

b.add(4); // 7

在该对象中，我们为b、c的_proto_作了明确指向，形成下图结构

图解js原型对象、原型链

2）new 构造器的方式创建对象（function）：

function f(name,age,gender){

this.name=name;

this.age=age;

this.gender=gender

}

var k=new f('小明',18,'男')

图解js原型对象、原型链

通过new操作符调用的函数就是构造函数。k是f()的实例，实例的构造函数属性constructor指向构造函数。由构造函数构造的对象，其[[prototype]]指向其构造函数的prototype属性指向的对象。每个函数都有一个prototype属性，其所指向的对象带有constructor属性，这一属性指向函数自身。

再来看一个稍微复杂的例子

function F(y){
this.y = y ;
}

Foo.prototype.x = 1;

Foo.prototype.add = function(z){
return this.x+this.y+z;
};

var b = new F(1);

alert(b.add(2)); //4

图解js原型对象、原型链

3）Object.create构造对象

var obj={

name:'小明',

age:18,

gender:'男'

}

var obj1=Object.create(obj)

对象obj1的[[prototype]]指向对象obj

用通俗的话来讲，通过原型链的延续我们可以实现Js中的继承，原型链的顶端是Object.prototype.__proto__，而Object.prototype是一切对象的原型，所以这个对象上所有的属性都能被我们使用，它不能有任何对象为原型，所以递归访问_proto_的终点Object.prototype.__proto__等于null

如：

var y=function(){}

var x=new fn()

图解js原型对象、原型链

属性

Object.prototype.constructor 特定的函数，用于创建一个对象的原型。

Object.prototype.__proto__ 指向当对象被实例化的时候，用作原型的对象。

Object.prototype.__noSuchMethod__ 当未定义的对象成员被调用作方法的时候，允许定义并执行的函数。

方法

Object.prototype.__defineGetter__() 关联一个函数到一个属性。访问该函数时，执行该函数并返回其返回值。

Object.prototype.__defineSetter__() 关联一个函数到一个属性。设置该函数时，执行该修改属性的函数。

Object.prototype.__lookupGetter__() 返回使用 __defineGetter__ 定义的方法函数。

Object.prototype.__lookupSetter__() 返回使用 __defineSetter__ 定义的方法函数。

Object.prototype.hasOwnProperty()返回一个布尔值，表示某个对象是否含有指定的属性，而且此属性非原型链继承的。

Object.prototype.isPrototypeOf()返回一个布尔值，表示指定的对象是否在本对象的原型链中。

Object.prototype.propertyIsEnumerable()判断指定属性是否可枚举，内部属性设置参见 ECMAScript DontEnum attribute 。

Object.prototype.toSource() 返回字符串表示此对象的源代码形式，可以使用此字符串生成一个新的相同的对象。

Object.prototype.toLocaleString()直接调用 toString()方法。

Object.prototype.toString()返回对象的字符串表示。

Object.prototype.unwatch() 移除对象某个属性的监听。

Object.prototype.valueOf()返回指定对象的原始值。

Object.prototype.watch() 给对象的某个属性增加监听。

秒客网

图解js原型对象、原型链

属性

方法

相关文章