js原型和原型链

矫情吗；* 2022-06-08 07:09 343阅读 0赞

今天听了有关js原型的课程讲解，关于JavaScript原型的理解是一个难点，老师通过一些例子简单的介绍了js原型和原型链，下面是我的整理。  
首先我们需要了解一下普通对象和函数对象：  
1.javascript中 万物皆对象；  
2.对象是有区别的，分为普通对象(object)和函数对象(function)；  
3.规则一：凡是通过new Function()创建的对象都是函数对象，其他的都是普通对象；  
4.Object和Function都是通过new Function()创造的；  
下面是几个简单的例子：

//1.javascript中 万物皆对象
        //2.对象是有区别的，分为普通对象(object)和函数对象(function)
        //3.规则一：凡是通过new Function()创建的对象都是函数对象，其他的都是普通对象
        //4.Object和Function都是通过new Function()创造的
    
        function fn1() { }
        console.log(typeof fn1);   //function
    
        var fn2 = function () { };
        console.log(typeof fn2);    //function
    
        //new function使用系统内置函数对象来构建一个函数
        var fn3 = new Function();
        console.log(typeof fn3);    //function
    
        var obj1 = {};
        console.log(typeof obj1);   //object
    
        var obj2 =  new Object();
        console.log(typeof obj2);   //object
    
        var obj3 = new fn1();
        console.log(typeof obj3);   //object
    
        var obj4 = new fn3();
        console.log(typeof obj4);   //object
    
        console.log(typeof Function);   //function
        console.log(typeof Object);     //function

--------------------

5.prototype（原型对象） 属性使你有能力向对象添加属性和方法；  
6.普通对象没有prototype，但是有\_\_proto (下划线打不出来QAQ)；  
7.原型对象就是普通对象，除了Function.prototype；

//5.prototype 属性使你有能力向对象添加属性和方法。
        //6.普通对象没有prototype，但是有__proto__
        //7.原型对象就是普通对象，除了Function.prototype
        var temp1 = new fn1();
        fn1.prototype.name = 'arashi';
        console.log(temp1.name === 'arashi');   //true
        Array.prototype.sayhello = function () { 
            console.log('hello arashi');
        }
        var arr = new Array();
        arr.sayhello();     //hello arashi
    
        console.log(fn1.prototype);
        console.log(typeof fn1.prototype);  //object
        console.log(typeof Function.prototype);     //function

--------------------

8.原型对象的作用：主要用来做继承。如果构造函数和构造函数的原型对象，都有同一个方法，那么会优先继承构造函数的。在js底层，一般都是给父构造函数的原型对象添加方法。

//8.原型对象的作用：主要用来做继承
        //如果构造函数和构造函数的原型对象，都有同一个方法，那么会优先继承构造函数的
        //在js底层，一般都是给父构造函数的原型对象添加方法
    
        var Student = function () { 
            this.name = "nino";
        }
    
        Student.prototype.name = "ninomi";
    
        var nino = new Student();
        console.log(nino.name); // nino 优先继承构造函数

9.原型对象如何实现的继承呢？主要通过原型链来继承。  
10.js在创造对象的时候，不管是普通对象还是函数对象都有\_\_proto属性；  
11.规则二:\_\_proto指向创建它的构造函数的原型对象；

//9.如何实现的继承
        //通过原型链来继承
        //10.js在创造对象的时候，不管是普通对象还是函数对象都有__proto__属性
        //11.规则二:__proto__指向创建它的构造函数的原型对象
    console.log(nino.__proto__); //nino的构造函数的原型对象的Student.prototype;
    console.log(Student.prototype);
    console.log(nino.__proto__ === Student.prototype);  //true

12.构造函数的Student.prototype的谁创造的呢，答案是Object。也就是说，Student.prototype.\_\_proto指向Object.prototype。

//12.构造函数的Student.prototype的谁创造的呢，答案是Object
        //也就是说，Student.prototype.__proto__指向Object.prototype
        console.log(Student.prototype.__proto__ === Object.prototype);  //true

13.Object.prototype.\_\_proto是null，一切归一 ，大家都是null创造的。

//13.Object.prototype.__proto__是null
        //一切归一 大家都是null创造的
        console.log(Student.__proto__ === Function.prototype);//true
        console.log(Object.__proto__ === Function.prototype);//true
        console.log(Function.__proto__ === Function.prototype);//true
        console.log(Function.prototype.__proto__ === Object.prototype);//true
        console.log(Object.prototype.__proto__ === null);   //true

画了一张简单的图帮助理解：  
![这里写图片描述][SouthEast]  
这是我看到的一张比较容易理解的js原型图：

![这里写图片描述][SouthEast 1]

15.规则三：继承的实现，其实并不是靠prototype，而是靠\_\_proto  
16.规则四：原型链的作用，在于读取对象的某个属性时，js引擎会优先查找对象本身的属性。如果没有，会去该对象的构造函数的原型对象（prototye）上找，如果还是没有找到，就会去构造函数的原型对象的构造函数的原型对象上寻找，如果还是找不到，会一直找下去……直到最顶层的原型对象，Object，prototype，如果还是没有，则返回undefined；  
17.这个过程中，维持上下层关系靠的是\_\_proto；

//15.规则三：继承的实现，其实并不是靠prototype，而是靠__proto__
        //16.规则四：原型链的作用，在于读取对象的某个属性时，js引擎会优先查找对象本身的属性
        //如果没有，会去该对象的构造函数的原型对象（prototye）上找
        //如果还是没有找到，就会去构造函数的原型对象的构造函数的原型对象上寻找，如果还是找不到，会一直找下去
        //直到最顶层的原型对象，Object，prototype，如果还是没有，则返回undefined
        //17.这个过程中，维持上下层关系靠的是__proto__
    
        var HrhArray = function () { 
    
        };
        var hrhArr = new HrhArray();
        hrhArr.__proto__ = new Array();
        hrhArr.push(1);
        console.log(hrhArr.__proto__);
        console.log(hrhArr);

上面这个例子也有图帮助理解：  
![这里写图片描述][SouthEast 2]

18.规则五：prototype(原型对象)有一个属性叫做constructor。constructor默认指向prototype(原型对象) 所在的构造函数，constructor 属性返回对创建此对象的数组函数的引用。  
constructor有四个作用：  
1.作用一：分辨原型对象到底属于哪个构造函数  
2.作用二：可以从一个实例对象新建另一个实例对象  
3.作用三：在实例方法中，可以通过constructor调用自身的构造函数  
4.作用四：继承

//18.规则五：prototype(原型对象)有一个属性叫做constructor
        //constructor默认指向prototype(原型对象) 所在的构造函数
        //constructor 属性返回对创建此对象的数组函数的引用。
        function fn5() { 
    
        }
        console.log(fn5.prototype.constructor === fn5 );
        //由于constructor属性是定义在prototype上的，那么就意味着可以被实例对象所继承
        var obj5 = new fn5();
        console.log(obj5.constructor === fn5);
    
        //可以使用hasOwnProperty方法来验证一个属性是自己的还是继承过来的
        console.log(obj5.hasOwnProperty("constructor"));
    
        //constructor的作用
        //作用一：分辨原型对象到底属于哪个构造函数
        function isInstance(Func, obj) { 
            return obj.constructor === Func;
        }
        console.log(isInstance(fn5,obj5));
    
        //作用二：可以从一个实例对象新建另一个实例对象
        function fn6() { 
    
        }
        var x = new fn6();
        var y = new x.constructor();
    
        //系统提供一个方法来判断实例对象是否为该构造函数构造————————instanceof
        console.log(y instanceof fn6);
        console.log(isInstance(fn6, y));
    
    
        //作用三：在实例方法中，可以通过constructor调用自身的构造函数
        fn6.prototype.createCopy = function () { 
            return new this.constructor();
        }
    
        //this.constructor指向fn6
        var obj6 = new fn6();
        console.log(obj6.constructor === fn6)
        console.log(obj6.createCopy().__proto__ === fn6.prototype);
    
        //作用四：继承
        function Father() { 
            this.sex = "male";
        }
        function Son() { 
            this.age = "18";
            Son.superclass.constructor.call(this);
        }
        Son.superclass = new Father();
        var chb = new Son();
    
        console.log(chb.age);
        console.log(chb.sex);       //male
    
        //由于constructor属性是一种原型对象与构造函数的关联关系
        //所以我们在修改原型对象的时候，务必要小心
        function A() { 
    
        }
        var a = new A();
        console.log(a instanceof A); //true
    
        function B() { 
    
        }
        A.prototype = B.prototype;
        console.log(a.constructor === B);  //false
        console.log(a.constructor === A);   //true
    
        console.log(a instanceof A);    //false 结果失真
        console.log(a instanceof B);    //false 结果失真
    
        //谨记 不要直接修改原型对象

上面就是我对老师讲课内容的整理，供我自己复习相关知识用。

[SouthEast]: /images/20220608/75108e9cbcca42498120db0e4e86ae23.png
[SouthEast 1]: /images/20220608/6adc1c06980d4f71ae50c04367addedf.png
[SouthEast 2]: /images/20220608/2841a4fc404b4e379fdc097c687233ac.png