前端學習輯錄（1）：js繼承總結

---

這是博主目前學習並掌握到的繼承方式，並不能完整覆蓋到所有的繼承方式，會在學習中持續更新ヾ(◍°∇°◍)ﾉﾞ。

---

一、原型繼承

為了資料共享,改變原型指向,做到了繼承==>通過改變原型指向實現的繼承。

		//建立人這個建構函式；
 		function Person(name,age,sex) { 
            this.name=name;
            this.age=age;
            this.sex=sex;
        }
		 Person.prototype.sayHi=function () {
            console.log("您好");
        };
		//建立學生這個建構函式
        function Student(score) {
            this.score=score;
        }
        //改變學生的原型的指向========>使得學生繼承人
        Student.prototype=new Person("小李",20,"男")
        Student.prototype.study=function () {
            console.log("學習是一件持之以恆的事");
        };
        var stu = new Student(100);
        stu.sayHi();
        stu.study();

缺陷：因為改變原型指向的同時實現繼承,直接初始化了屬性，繼承過來的屬性的值都是一樣的了。
不能實現多繼承(一個子類同時繼承多個父類)。
解決方案：繼承的時候,不用改變原型的指向,直接呼叫父級的建構函式的方式來為屬性賦值。

二、借用建構函式繼承

借用建構函式：建構函式的名字.call(當前物件,屬性，屬性…)

		function Person(name,age,sex) {
            this.name=name;
            this.age=age;
            this.sex=sex;
        }
        Person.prototype.sayHi=function () {
            console.log("您好");
        };
		//借用建構函式：屬性值重複的問題==>繼承屬性
		//通過使用call改變this指向，指向父類例項，相當於複製父類例項的屬性給子類
        function Student(name,age,sex,score) {
            Person.call(this,name,age,sex);
            this.score=score;
        }

        var stu= new Student("小李",20,"男",100);
        console.log(stu.name,stu.age,stu.sex,stu.score);
        stu.sayHi();//報錯

主要解決屬性的問題，不能很好的解決方法繼承的問題。

三、組合繼承

組合繼承：原型繼承+借用建構函式繼承。

       function Person(name,age,sex) {
            this.name=name;
            this.age=age;
            this.sex=sex;
        }
        Person.prototype.sayHi=function () {
            console.log("您好");
        };

        function Student(name,age,sex,score) {
            //借用建構函式：屬性值重複的問題==>繼承屬性
            Person.call(this,name,age,sex);
            this.score=score;
        }
        //改變原型繼承==>繼承方法
        Student.prototype = new Person();//不傳值
        var stu = new Student("小李",20,"男",100);
        console.log(stu.name,stu.age,stu.sex,stu.score);
        stu.sayHi();

優點：可以同時繼承屬性和方法。

四、拷貝繼承

拷貝繼承；把一個物件中的屬性或者方法直接複製到另一個物件中。

		function Person() {

        }
        Person.prototype.name="小李";
        Person.prototype.age="20";
        Person.prototype.sex="男";
        Person.prototype.sayHi=function () {
            console.log("您好呀");
        };

        var obj1 ={};
         //Person的構造中有原型prototype,prototype就是一個物件，那麼裡面,age,sex,height,play都是該物件中的屬性或者方法。
        for(var key in Person.prototype){
            obj1[key]=Person.prototype[key];
        }
        console.log(obj1);
        obj1.sayHi();

缺點：因為每次都要執行遍歷，造成記憶體消耗嚴重，效率低。

總結

總結常用的四種繼承，以及他們的優缺點。