要想明白js中原型以及原型链是什么,首先要明白一句话:JavaScript中万物皆对象。
Object和Function的关系
Object和Function都作为JS的自带函数,Object继承自己,Funtion继承自己,Object和Function互相是继承对方,也就是说Object和Function都既是函数也是对象。
console.log(Function instanceof Object); // true
console.log(Object instanceof Function); // true
Object 是 Function的实例,而Function是它自己的实例。
console.log(Function.prototype); // ƒ () { [native code] }
console.log(Object.prototype); // Object
普通对象和函数对象
JavaScript中万物皆对象,但对象之间也是有区别的。分为函数对象和普通对象。
函数对象可以创建普通对象,普通对象没法创建函数对象,普通对象JS世界中最低级的小喽啰,啥特权也没有。
凡是通过new Function创建的对象都是函数对象,其他都是普通对象(通常通过Object创建),可以通过typeof来判断。
function f1(){};
typeof f1 //"function"
var o1 = new f1();
typeof o1 //"object"
var o2 = {};
typeof o2 //"object"
这边要注意的是下面这两种写法是一样的
function f1(){}; == var f1 = new Function();
function f2(a,b){
alert(a+b);
}
等价于
var f2 = new Function(a,b,"alert(a+b)");
原型的概念
无论何时只要创建了一个函数,该函数就会有一个prototype属性,指向函数的原型对象。而原型对象会有一个constructor属性,包含一个指向构造函数的指针。当调用构造函数创建一个实例后,实例内部包含一个指针,指向构造函数的原型对象,浏览器上都支持这个属性为__proto__
,这是一个实例与原型对象的联系。
原型链的概念
javascript中,每个对象都会在内部生成一个proto 属性,当我们访问一个对象属性时,如果这个对象不存在就回去proto 指向的对象里面找,一层一层找下去,这就是javascript原型链的概念。
f1.__proto__
==> Demo.prototype > Demo.prototype.__proto__
> Object.prototype > Object.prototype.__proto__
> null
也就是说:万物皆对象,所有的东西都由Object衍生而来, 即所有东西原型链的终点指向null。
prototype、__proto__
和construetor的关系
1、每一个函数对象都有一个prototype属性,但是普通对象是没有的;
prototype下面又有个construetor,指向这个函数。
2、每个对象都有一个名为__proto__
的内部属性,指向它所对应的构造函数的原型对象,原型链基于__proto__
;
好了,开始上代码和例子,建一个普通对象,我们可以看到
- o的确没有prototype属性
- o是Object的实例
- o的__proto__指向Object的prototype
- Object.prototype.constructor指向Object本身
var o = {};
console.log(o.prototype); //undefined
console.log(o instanceof Object); //true
console.log(o.__proto__ === Object.prototype) //true
console.log(Object === Object.prototype.constructor) //true
console.log(Object.prototype.constructor) //function Object()
console.log(Object.prototype.__proto__); //null
//demo是函数对象,f1还是普通对象,f1是Demonew出来的的实例
function Demo(){};
var f1 = new Demo();
console.log(f1.prototype); //undefined
console.log(f1 instanceof Demo); //true
console.log(f1.__proto__ === Demo.prototype); //true
console.log(Demo === Demo.prototype.constructor) ;//true
//demo的原型prototype的proto指向Object的原型prototype,而Object的原型prototyped的proto指向null;
console.log(Demo.prototype.__proto__ === Object.prototype) ;//true
console.log(Object.prototype.__proto__); //null