JavaScript原型链与继承操作实例总结

原型、原型链与继承

一、原型

1.什么是原型：

简单说就像css的class一样，是公用的，给DOM元素加个class名就可以公用样式，那么原型就相当于css里面的class，都可以用。

在构造函数创建出来的时候，系统会默认的帮构造函数创建并关联一个神秘的对象，这个对象就是原型，构造函数的每一个实例都可以访问原型中的成员(一般我们放方法)；

2.原型链：

(原型链这个概念常考哦~) 首先呢，正如上面所说的，当函数被new操作符调用时，会创建出一个对象，并且该对象中会有一个指向其原型对象的秘密链接(一个非标准属性：proto)，这样新建的对象(实例)就可以调用相关原型对象中的成员；(咳咳，正题来了哈)但是，原型对象自身也具有对象固有的普遍特征(它也是个对象)，因此，也包含了指向其原型对象的链接，因此嘞，就形成了一个链式结构，称之为原型链；

二、继承

1.那么什么又是继承呢：

其实就是一个对象没有的成员，但是另一个对象有，给它拿过用；(在现实世界中这好像叫‘借’吧)

2.继承的过程：

(这里引用一个段子) 你媳妇他妈跟你要100万，你没有咋办？找你爹，你爹也没有，咋整？找你爹的爹，但是你爹的爹的爹死了，所以你爷爷说家里没有，也就是返回null；(其实写到这里我内心是崩溃的)

3.继承方式：

//1.混入式继承，说是混入式有点高大上，其实就是遍历赋值
        function Person(){

        }

        let obj = { 
            name:'jack',
            age:'18',
            sayHello:function(){
                console.log('你好，我是'+this.name);
            }};

        for( let k in obj){
            //判断一下obj中的k是不是自己的，当然这不是咱们这篇文章主要研究的
            if(obj.hasOwnProperty(k)){
                //这种不会破坏原型中的constructor的指向
                Person.prototype[k] = obj[k];
            }
        }



        //2.经典继承
        Person.prototype = Object.create(obj);
        
        //上面的代码相当于
        function create(obj){
            function P(){};
            P.prototype = obj;
            return new P();
        }    


        //3.借用构造函数,这种方法继承不过去
        function Person(name,age){
            this.name = name;
            this.age = age;
        }

        Person.prototype.sayHello = function(){
            console.log('你好，我是'+this.name);
        }

        function Human(name,age){
            Person.apply(this,arguments);
        }

        let p = new Human('jack',18);
        console.log(p); 
        p.sayHello();  //p.sayHello is not a function



        //4.直接替换，会改变obj1的constructor的指向
        obj1.prototype = obj2.prototype;