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,原型链图

javascript原型链

相关推荐