javascript原型链

来源:互联网 发布:怎样应聘淘宝唇模 编辑:程序博客网 时间:2024/06/05 15:05

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" //truesum.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,原型链图