JS原型?
有句简洁直观的描述:"原型是Javascript中的继承的基础,JavaScript的继承就是基于原型的继承"。
在JavaScript中,原型也是一个对象,通过原型可以实现对象的属性继承,JavaScript的对象中都包含了一个"[[Prototype]]"内部属性,这个属性所对应的就是该对象的原型。
"[[Prototype]]"作为对象的内部属性,是不能被直接访问的。所以为了方便查看一个对象的原型,Firefox和Chrome中提供了__proto__这个非标准(不是所有浏览器都支持)的访问器(ECMA引入了标准对象原型访问器"Object.getPrototype(object)")。在JavaScript的原型对象中,还包含一个"constructor"属性,这个属性对应创建所有指向该原型的实例的构造函数。
提到原型,我们必须要了解下Object和Function:
Object和Function都是JS的自带函数,Object继承自己,Funtion继承自己,Object和Function互相是继承对方,也就是说Object和Function都既是函数也是对象。
//instanceof 就是判断一个实例是否属于某种类型
console.log(Function instanceof Object); // true
console.log(Object instanceof Function); // true
前面提到为了方便查看一个对象的原型,引入"__proto__",那么Function和Object对应的原型是什么?
console.log(Function.__proto__); // ƒ () { [native code] }
console.log(Object.__proto__); // ƒ () { [native code] }
console.log(Function.__proto__==Function.prototype); //true
console.log(Object.__proto__==Function.prototype); //true
所以,Object 是 Function的实例,而Function是它自己的实例。
说到Function和Object的相互继承和对应原型,可能觉得有点头大,那我们先放一下,让我们先了解下js对象的一些小知识
普通对象和函数对象
万物皆对象,js中对象其实分为函数对象和普通对象。
函数对象可以创建普通对象,普通对象没法创建函数对象,所以普通对象权利最低。
//普通对象
let str=new String();
let num=new Number();
let obj=new Object();
//....
凡是通过new Function创建的对象都是函数对象,其他都是普通对象(通常通过Object创建),可以通过typeof来判断。
function f1(){}; // == var f1 = new Function();
function f2(a,b){
alert(a+b);
}
//等价于
var f2 = new Function(a,b,"alert(a+b)");
说那么多,其实记住下面的内容就好了:
1.每一个函数对象都有一个prototype属性,但是普通对象是没有的;prototype下面又有个construetor,指向这个函数。
2.每个对象都有一个名为_proto_的内部属性,指向它所对应的构造函数的原型对象,原型链基于_proto_;
让我们建一个普通函数,可以看到:
var obj = {};
console.log(obj.prototype); //undefined
console.log(obj instanceof Object); //true
console.log(obj.__proto__ === Object.prototype) //true
console.log(Object === Object.prototype.constructor) //true
console.log(Object.prototype.constructor) //function Object()
console.log(Object.prototype.__proto__); //null
- obj的确没有prototype属性
- obj是Object的实例
- obj的__proto__指向Object的prototype
- Object.prototype.constructor指向Object本身
再建一个函数对象:
function Fun(){};
var f1 = new Fun();
console.log(f1.prototype); //undefined
console.log(f1 instanceof Fun); //true
console.log(f1.__proto__ === Fun.prototype); //true
console.log(Fun=== Fun.prototype.constructor) ;//true
console.log(Fun.prototype.__proto__ === Object.prototype) ;//true
console.log(Object.prototype.__proto__); //null
- Fun是函数对象,f1还是普通对象
- f1是Fun的实例
- Fun的原型prototype的__proto__指向Object的原型prototype,而Object的原型prototyped的__proto__指向null;
原型链
ECMscript中描述了原型链的概念,并将原型链作为js实现继承的主要方法。
基本思路:利用原型,让一个引用类继承另一个引用类的属性和方法。
构造函数、原型和实例的关系:
每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。
其实,avascript中,每个对象都会在内部生成一个proto 属性,当我们访问一个对象属性时,如果这个对象不存在就回去proto 指向的对象里面找,一层一层找下去,这就是javascript原型链的概念。
f1.__proto__ ==> Fun.prototype ==> Fun.prototype.__proto__ ==> Object.prototype ==> Object.prototype.__proto__ ==> null
JS世界中所有的东西都是对象,所有的东西都由Object衍生而来, 所以所有东西原型链的终点指向null