javascript原型链

javascript语言中，没有类的概念。如何在前端开发中，融入OOP的思想呢？

在此之前，我们先要弄清楚function，new这两个关键字都做了些什么。

function:

使用function 实现 javascript函数申明。函数我们都会用，然而javascript的函数到底是什么？

让我们从最简单的函数开始：javascript数据是存在栈内存(stack)和堆内存(heap)里的。堆内存存储javascript对象的具体内容，而栈内存存储对象的地址，下面的代码：

 

function sum(a,b)
{
    return a+b;
}    

sum 存储在栈内存， function(){return a+b;} 存储在堆内存里面。 sum 记录的是 function(){return a+b;} 在堆内存的地址。（是不是让你想起c的指针了）

 

你应该还记得javascript的原生对象吧？Object, Function, Array....

sum instanceof Function

 结果是true

 

你用function创建了一个对象！javascript的函数其实是对象，而函数名是指向对象的指针。

现在让我们来看看，这个对象的三个特殊属性，constructor,prototype,__proto__

constructor:

 

sum.constructor === Function //true

 

 说明任何一个函数都是通过Function对象构造出来的。

prototype:

typeof sum.prototype === "object" //true
sum.prototype.constructor === sum //true

 

 说明任何一个函数都构造了一个原型对象，并通过prototype指向这个对象。

__proto__:

 

sum.__proto__ === Function.prototype

 对象的__proto__属性，指向其构造函数的原型对象。

new:

按照javascript语言精粹中所说，如果在一个函数前面带上new来调用该函数，那么将创建一个隐藏连接到该函数的prototype成员的新对象，同时this将被绑定到那个新对象上。

这就是javascript的原型链。

 

1，做一个测试

 function person(){ this.name = 'James'; }

 var p = new person();


 console.log(p.__proto__ === person.prototype);
 console.log(p.constructor === person);
 
 console.log('---------------------');
 
 console.log(person.prototype.constructor === Function);
 console.log(person.prototype.__proto__ === Object.prototype);
 console.log(person.__proto__  === Function.prototype);
 console.log(person.constructor  === Function);
 console.log(person.prototype.constructor  === person);
 
 console.log('---------------------');
 
 console.log(Object.__proto__ === Function.prototype);
 console.log(Function.__proto__ === Function.prototype);
 console.log(Object.constructor === Function);
 console.log(Object.prototype.constructor === Object);
 console.log(Object.prototype.__proto__);
 
  console.log('---------------------');
 
  console.log(Object.prototype.__proto__);
  console.log(Function.prototype.__proto__ === Object.prototype);

 

2，原型链图