理解原型链

JavaScript之原型链

参考:http://zhangjiahao8961.iteye.com/blog/2070650javascript

原型链

概念java

原型链是一种机制,指的是JavaScript每一个对象包括原型对象都有一个内置的[[proto]]属性指向建立它的函数对象的原型对象,即prototype属性。函数

做用this

原型链的存在,主要是为了实现对象的继承spa

理解prototype

要理解原型链,须要从几个概念入手。code

图片描述

一、函数对象

在JavaScript中,函数即对象。对象

二、原型对象

当定义一个函数对象的时候,会包含一个预约义的属性,叫prototype,这就属性称之为原型对象。blog

//函数对象
function F(){};
console.log(F.prototype)

图片描述

//普通对象
var a = {};
console.log(a.prototype);//undefined

图片描述

三、__proto__

JavaScript在建立对象的时候,都会有一个[[proto]]的内置属性,用于指向建立它的函数对象的prototype。原型对象也有[[proto]]属性。所以在不断的指向中,造成了原型链。继承

举个例子来讲,咱们将对象F的原型对象修改一下,就能够清楚看到上述的关系

//函数对象
function F(){};
F.prototype = {
    hello : function(){}
};
var f = new F();
console.log(f.__proto__)

图片描述

四、new

当使用new去调用构造函数时,至关于执行了

var o = {};
o.__proto__ = F.prototype;
F.call(o);

所以,在原型链的实现上,new起到了很关键的做用。

五、constructor

原型对象prototype上都有个预约义的constructor属性,用来引用它的函数对象。这是一种循环引用。

function F(){};
F.prototype.constructor === F;

图片描述

在实际运用中,常常会有下列的写法

function F(){};
F.prototype = {
    constructor : F,
    doSomething : function(){}
}

这里要加constructor是由于重写了原型对象,constructor属性就消失了,须要本身手动补上。

六、原型链的内存结构

function F(){
    this.name = 'zhang';
};
var f1 = new F();
var f2 = new F();

为了严谨起见,区分对象和变量

图片描述

相关文章
相关标签/搜索