图解js原型对象、原型链

时间:2022-08-24 22:43:14

在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()  给对象的某个属性增加监听。