js繼承的幾種方式

阿新 • • 發佈：2020-08-22

1、原型鏈繼承

2、原型式繼承

3.聖盃模式

4、非標準模式

5、自定義

6、建構函式繼承（物件冒充繼承）

7、組合繼承（原型鏈+建構函式）

8、寄生組合繼承

一、原型鏈繼承

 function Person(name, age) {
            this.name = name;
            this.age = age;
        }

        function sayHi() {
            this.age = '20'; //sayHi通過原型繼承了Person，形成了鏈條
        }
        sayHi.prototype  
= new Person('lydia', 15);
        var Person = new sayHi();
        // console.log(Person.age);

二、原型繼承

// 二、原型繼承   原型上會汙染
        function Father() {}
        Father.prototype.firstName = '琳達';

        function Son() {}
        //兒子的原型指向父親
        Son.prototype = Father.prototype;

        Son.prototype.age  
= 10;

        var son = new Son();
        var father = new Father();
        father.name = '愛德華';

三、聖盃模式

 // 4、聖盃模式
        function Father() {}
        Father.prototype.firstName = '琳達';

        function Son() {}

        function Temp() {}
        //son的原型鏈上有father.prototype

        var inhert = (function(Target, Origin) {
             
// 定義一個空物件
            function F() {}
            return function(Target, Origin) {
                // 讓f指向father
                F.prototype = Origin.prototype;
                // target原型指向f,到這裡會發現都指向了father
                Target.prototype = new F();
                Target.prototype.constructor = Target;
                Target.prototype.uber = Target.prototype;
            }
        })();
        // son的原型鏈上有father.prototype 且不會造成原型鏈汙染
        inhert(Son, Father);
        Son.prototype.age = 21;
        var son = new Son();
        console.log(son.__proto__.constructor);

四、非標準模式繼承

// 2.第二種繼承方式  非標準
        // 使用者  vip使用者 money
        function User(uName, uAge, uSex) {
            this.uName = uName;
            this.uAge = uAge;
            this.uSex = uSex;
        }
        User.prototype.login = function() {
                console.log('welcome' + this.uName);
            }
            // 程式設計解耦
        function VIP(uName, uAge, uSex, uMoney) {
            User.call(this, uName, uAge, uSex);
            this.uMoney = uMoney;
        }
        var vip1 = new VIP('lily', 16, '女', 100);

五、自定義

function Person(firstName, lastName, age) {
            this.firstName = firstName;
            this.lastName = lastName;
            this.age = age;
            this.fullName = this.firstName + " " + this.lastName;
        }
        Person.prototype.sayHello = function() {
            console.log(`大家好，我叫${this.fullName},今年${this.age}歲了`)
        }

        function inherit(son, father) {
            // 1. 最容易理解的方式 容易造成原型的汙染 因此不推薦  在son原型上新增的任何屬性都會同步到father中  
            son.prototype = Object.create(father.prototype);
            // 給原型物件設定建構函式值
            son.prototype.constructor = son;
            // 記錄父類的原型    聖盃模式的相容寫法
            son.prototype.uber = father;
        }
        inherit(Student, Person);

        function Student(firstName, lastName, age, className) {
            // Person(firstName, lastName, age);//this->wondow
            // 改變this指向
            // Person.call(this, firstName, lastName, age);
            // Person.apply(this, arguments);

            // 聖盃模式中的以一種思路
            this.uber(firstName, lastName, age);

            this.className = className;
        }
        Student.prototype.learning = function() {
            console.log(`我是${this.className}班的學生，正在學習前端`);
        }

        var lilei = new Student('lili', 12, '20202006');