JS原型与原型链
函数的prototype属性
-
每个函数都有一个prototype属性,它默认指向一个Object空对象(即称为:原型对象)
-
原型对象中有一个constructor属性,它指向函数对象
-
给原型对象添加属性(一般是方法),函数的所有实例对象自动拥有原型中的属性(方法)
console.log(Date.prototype);//Object对象
function Type(){};
console.log(Type.prototype);//默认指向一个Object空对象(没有我们自己添加的属性),跟上面的不同
// 给原型对象添加方法,给实例对象访问使用
Type.prototype.test = function(){
console.log('test()');
};
// 原型对象有一个属性constructor,它指向函数对象
console.log(Date.prototype.constructor === Date);
console.log(Type.prototype.constructor === Type);
const fun = new Type();
fun.test();
显式原型和隐式原型
- 每一个函数function都有一个prototype属性(这个属性是在定义函数时自动添加),即为显式原型属性,默认执行指向一个空的Object实例对象(但是构造函数Object不满足)
- 每一个实例对象都有一个_proto _属性(创建对象时添加),可称为隐式原型属性
- 实例对象的隐式原型的值为其对应构造函数的显式原型的值
- 所有函数都是Function的实例对象(即有prototype属性和_proto _属性),包括Function本身
function Fn() {
//每一个函数function都有一个prototype,即为显式原型属性,默认执行指向一个空的Object对象
//内部语句:this.prototype = {};
}
//每一个函数的prototype即为显式原型
console.log(Fn.prototype);
const fn = new Fn();//执行的时候内部执行了一条语句,this.__proto__ = Fn.prototype
//实例对象的__proto__即为隐式原型
console.log(fn.__proto__);
//对象的隐式原型的值为其对应构造函数的显式原型的值,它内部执行了一条语句this.__proto__ = Fn.prototype
console.log(Fn.prototype === fn.__proto__);//true
// 给原型添加方法
Fn.prototype.test = function() {
console.log('test()');
}
fn.test();//test()
//每一个函数function都有一个prototype,即为显式原型属性,默认执行指向一个空的Object实例对象(但是Object不满足)
console.log(Fn.prototype instanceof Object);//true
console.log(Object.prototype instanceof Object) // false
console.log(Function.prototype instanceof Object)//true
//所有函数都是Function的实例,包括Function本身
console.log(Function.__proto__ === Function.proptotype);//true
//Object的原型对象是原型链尽头
console.log(Object.prototype.__proto__);//null
原型链(隐式原型连)
- 访问一个对象的属性时,先在自身属性中查找,找到返回,如果没有,再沿着__proto _这条链上向上查找,找到返回,没有的话返回undefined
function Fn() {
this.test1 = function(){
console.log('test1()');
}
}
Fn.prototype.test2 = function(){
console.log('test2()');
}
const fn = new Fn();
fn.test1();//test1()
fn.test2();//test2()
console.log(fn.toString());
fn.test3()//报错fn.test3 is not a function
console.log(Fn.prototype);
原型链属性问题
- 读取对象的属性值时:会自动到原型链中查找
- 设置对象的属性值时:不会查找原型链,如果当前对象中没有此属性,直接添加此属性并设置其值
- 方法一般定义在原型中,属性一般通过构造函数定义在对象本身中
function Fn(){}
Fn.prototype.a = 'xxx';
const fn1 = new Fn();
console.log(fn1.a);//xxx
const fn2 = new Fn();
fn2.a = 'yyy';
console.log(fn2.a, fn1.a);//yyy, xxx
探索intanceof
- A instanceof B判断A是否是B的实例对象,如果B函数的显式原型对象在A对象的隐式原型链上,返回为true,否则返回false
- Function是通过new自己产生的实例
function Foo(){}
const f1 = new Foo();
console.log(f1 instanceof Foo);//true
console.log(fh instanceof Object);//true
console.log(Object instanceof Function);//true
console.log(Object instanceof Object);//true
console.log(Function instanceof Function);//true
console.log(Function instanceof Object);//true
function Foo(){};
console.log(Object instanceof Foo);//false
测试题
- 测试题1
function A(){};
A.prototype.n = 1;
const b = new A();
A.prototype = {
n: 2,
m: 3
};
const c = new A();
console.log(b.n, b.m, c.n, c.m);//1,undefined,2,3
- 测试题2
function F(){};
Object.prototype.a = function(){
console.log('a()');
};
Function.prototype.b = function() {
console.log('b()');
}
var f = new F();
f.a();//a()
f.b();//f.b is not a function
F.a();//a()
F.b();//b()