js原型和原型链

百度找的一张图片 图片看懂了 真的很好理解

原型

/*
    函数的prototype属性
        每个函数都有一个prototype属性 它默认指向一个Object空对象（原型对象）
        原型对象总有一个属性 constructor 指向函数对象
    给原型对象添加属性(一般都是方法)
        作用 函数的所有实例对象 自动拥有原型中的属性(方法)
     */
    console.log(Date.prototype)
    function F() {
        name:'f'
        get:function f2() {
            
        }
    }
    F.prototype.test = function (){
        console.log("test")
    }
    console.log(F.prototype)

    console.log(F.prototype)
    console.log(Date.prototype.constructor === Date)
    console.log(F.prototype.constructor === F)

    var f =new F()
    f.test()

显示原型和隐式原型

 /*
    1. 每一个函数都有一个 prototype 即显示原型
    2. 每个实例对象都有一个__proto__ 隐式原型
    3. 对象的隐式原型的值为其对应构造函数的显示原型的值
    4. 内部结构
    5. 总结
        函数的prototype 属性在定义时自动添加 默认是一个空的对象
        对象的__proto__ 属性 创建对象式自动添加 默认值为构造函数的 prototype属性值
        es6 之前 可以直接操作显示原型 但不能操作隐式原型

    */
    function Fn() {
        //this.prototype={}
    }
    console.log(Fn.prototype);
    var fn =new Fn()  // this.__proto__ = Fn.prototype
    Fn.prototype.test = function () {
        console.log('test');
    }
    console.log(fn.prototype);
    console.log(fn.__proto__);
    console.log(Fn.prototype === fn.__proto__);
    fn.test()

原型链

        /*
        1. 原型链
            访问一个对象的属性时
                先在自身属性中找 找到返回
                没有 沿着__proto__ 这条链向上查找 找到返回
                如果最终没找到 返回undefined
            别名 隐式原型链
            作用 查找对象的属性(方法)
        2. 构造函数/原型/实体对象的关系    
        */
        console.log(Fn)
        console.log(Object.toString());
        console.log(Object.prototype.__proto__);
        function Fn() {
            console.log(this);
            this.test1 =function () {
                console.log('test1');
            }
        }
        Fn.prototype.test2 = function () {
            console.log('test2');
        }
        //Fn.test1()
        let fn =new Fn()
        fn.test1()
        fn.test2()
        console.log(fn);
        Function.prototype.test3 = function () {
            console.log('test3');
        }
        /*
        1. 函数的显示原型指向的对象默认是空Object实例对象(Object不是)
        */
        console.log(Fn.prototype instanceof Object); // true
        console.log(Function.prototype instanceof Object); // true
        console.log(Object.prototype instanceof Object); // false

        /*
        2. 所有函数都是Function的实例(包含Function)
        */
       console.log(Function.__proto__ === Function.prototype);  //true

       // Object的原型对象是原型链的尽头 
       console.log(Object.prototype.__proto__);  //null

原型链 属性

/*
    1. 读取对象的属性值时: 会自动到原型链中查找
    2. 设置对象的属性值时: 不会查找原型链, 如果当前对象中没有此属性, 直接添加此属性并设置其值
    3. 方法一般定义在原型中, 属性一般通过构造函数定义在对象本身上
    */
    function Fn() {

    }
    Fn.prototype.a = 'xxx'
    var fn1 = new Fn()
    console.log(fn1.a); // xxx
    var fn2 =new Fn()
    console.log(fn2);
    fn2.a = 'yyy'  // 这里把函数变为了一个字符串
    console.log(fn2.a);  // yyy
    console.log(fn1.a); /// xxx
    console.log(fn1.__proto__ === fn2.__proto__); // true

instanceof

 /*
    1. instanceof 是如何判断的
        表达式 A instanceof B
        如果B函数的显示原型对象在A对象的原型链上 返回 true 否则返回 false
    2.  Function 是通过 new 自己产生的实例
    */
    function Foo() {}
    const f1 = new Foo() 
    console.log(f1 instanceof Foo);
    console.log(f1 instanceof Object);
    console.log(Foo instanceof Function);
    console.log(f1.__proto__); // false

    // 
    console.log(Object instanceof Function);
    console.log(Object instanceof Object);
    console.log(Function instanceof Function);
    console.log(Function instanceof Object);

    console.log(Object instanceof Foo); // false

function A() {

    }
    A.prototype.n = 1
    var b =new A()
    A.prototype = {
        n:2,
        m:3
    }
    
    var c =new A()
    var F =function () {}
    Object.prototype.a=function() {
        console.log("a()");
    }
    Function.prototype.b = function() {
        console.log("b()");
    }
    var f = new F()
    f.a() // 输出
    //f.b()  // not a function
    F.a() // 输出
    F.b() // 输出