一、原型
1.什么是原型?
原型是JS中继承的基础,JS的继承就是基于原型的继承。
2.几个基本定义
(1)每个函数都有一个prototype属性,它默认指向一个空的Object对象(称为原型对象)
(2)原型对象里面有一个constructor属性,它指向函数对象
代码展示:
(3)图示:
注:函数名叫Type ,prototype是其属性,Type.prototype指向的是Type的原型对象,原型对象里面有constructor属性constructor又指向的是Type。构造函数和函数对象之间是相互引用的关系。二、显式原型与隐式原型
1.每个函数function都有一个prototype即显式原型属性
2.每个实例对象都有一个隐式原型属性
3.对象的隐式原型的值为其对应构造函数的显式原型的值
//1、每个函数function都有一个prototype,称为显式原型属性 默认指向一个空的object对象
console.log(Fn.prototype); //函数对象定义时添加此属性
//2、每个实例对象都有一个_proto_可称为隐式原型(属性)
//创建实例对象
const fn = new Fn(); // this.__proto__ = Fn.prototype
console.log(fn.__proto__); //创建对象添加此属性
//3、对象的隐式原型的值为其对应构造函数的显式原型的值
console.log(Fn.prototype === fn.__proto__);
//4、给原型添加方法
Fn.prototype.test = function(){
console.log("test()");
};
//通过实例对象调用原型的方法
fn.test();
代码原型图示:
function Fn(){
}
var fn = new Fn();
Fn.prototype.test = function(){
console.log("test()");
};
fn.text();
总结:
函数的prototype属性:
- 在定义函数时自动添加的,默认值是一个空Object对象。
- 对象的_proto_属性:创建对象时自动添加的,默认值为构造函数的prototype属性值。
- 显式原型可以直接操作,隐式原型不能直接操作。
三、原型链
访问一个对象属性时现在自身属性中查找,找到返回。
如果没有再沿着_proto_这条链向上查找,找到返回。
如果最终没有找到,返回undefined
别名:隐式原型链
代码: function Fn(){
this.test1 = function(){
console.log("test1()");
};
console.log(this);
}
Fn.prototype.test2 = function(){
console.log('test2()');
};
//创建一个实例对象
var fn = new Fn();
console.log(fn);
console.log(fn.__proto__);
原型链图示:
注:原型链的尽头是Object的隐式原型属性为null,原型链是隐式原型链。
原型链的作用:查找对象的属性。
作用域链:查找变量。
四、总结:
1.所有函数都有两个属性一个隐式原型,一个显式原型。因为所有的函数都是大写Function的实例对象。下面两行代码是等价的
function foo(){
}
var foo = new Function();