简单认识JavaScript中的原型与原型链

一些预备知识

• 每个函数都有一个prototype属性（显式原型），在定义函数时自动添加，它默认指向一个Object空对象（原型对象）。
• 每个实例对象都有一个__proto__（隐式原型），创建对象时自动添加。
• 原型对象中有一个属性constructor，它指向函数对象
• 函数的所有实例对象自动拥有原型中的属性（方法）

对象的隐式原型的值为其对应构造函数的显式原型的值

一道简单的例题

    function Fn() {
        //内部语句：this.prototype = {}
        this.test1 = function () {
            console.log('test1()');
        }
    }
    Fn.prototype.test2 = function () {
        console.log('test2()');
    }
    var fn = new Fn();
    //内部语句：this.__proto__ = Fn.prototype
    fn.test1();
    fn.test2();
    console.log(fn.toString());
    fn.test3();

解：
原型链访问一个对象的属性时

1. 先在自身属性中查找，找到返回
2. 如果没有，再沿__proto__这条链向上查找，找到返回
3. 如果最终没找到，返回undefined

图解如下所示，需要注意的是Object的原型对象为原型链的尽头

注意一个点

• 读取对象的属性值时：会自动到原型链中查找
• 设置对象的属性值时：不会查找原型链

方法一般定义在原型中，属性一般通过构造函数定义在对象本身上

instanceof

检查一个对象是不是一个类的实例
A instanceof B:如果B函数的显式原型对象在A对象的原型链上，返回true，否则返回false

    function Foo() {}
    var f1 = new Foo()
    console.log(f1 instanceof Foo); //true
    console.log(f1 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

！！！注意注意注意！！！→（Function是通过new自己产生的实例）
ps：第三个判断那里试试（对象的隐式原型的值为其对应构造函数的显式原型的值），转换后带进去会有惊喜╰(°▽°)╯

面试题

题1

        var A = function() {};//function A(){}
        A.prototype.n = 1;
        var b = new A()//实例对象的隐式原型属性n:1
        A.prototype = {
            n: 2,
            m: 3
        }
        var 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();//undefined
    F.a(); //a()
    F.b(); //b()