原型与原型链

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()

自我理解原型链图