這一節,主要講解面向對象的繼承,回顧上一節講解到判斷對象原型和實例對象的兩種方法.廢話不多說,直接上代碼 !

繼承 ==> 重點

- 子對象-->父對象,Object是所有對象的父級

- 一種把其他對象的屬性和方法變為己有的方式

- 通過繼承可以提高代碼的復用性和可維護性

- 舉例 : 動物 -- 狗類 -- 金毛狗類

1.對于狗類來説:動物是它的父類型,而金毛狗類是它的子類型
2.對于金毛狗類來説.狗類是它的父類型,動物類是它的超類型.

繼承的兩種方式

• 接口繼承
• 實現繼承
• js中的繼承:
  javaScript中繼承只支持實現繼承,實現繼承主要依賴原型鏈來完成

Js中繼承的幾種實現方式

混入式繼承

• ** 示例代碼1 : **

    //1. 創建一個空的對象o
    var o = {};

    //2. 提供一個已經有的對象obj
    var obj = {
        name:"對象的屬性",
        age:20,
        sayHello:function () {
            console.log("hello");
        }
    }

    //3. 混入式繼承(把原有對象的所有屬性和方法都拷貝給新的對象)
    for(var k in obj)
    {
        o[k] = obj[k];
    }

    //4. 打印查看o對象
    console.log(o);

    //5. 如果屬性的值是引用類型的,那么子對象和父對象共享一塊數據,修改了某個對象對另外一個對象有影響
    console.log(o.sayHello == obj.sayHello);    //true

• **示例代碼2 : **

<script>
    //參數:
    //第一個參數是目標對象
    //第二個,第三個參數是要拷貝屬性的對象
    var o = {};
    var obj1 = {name:"name"};
    var obj2 = {age:20};
    var obj3 = {car:{type:"飛船"}};

    Object.assign(o,obj2,obj1,obj3);
    console.log(o);

    obj3.car.type = '汽車';
    console.log(o);
</script>

原型式繼承

• 原型對象中的成員(屬性|方法)可以被使用該構造函數創建出來的所有對象共享
• 利用上面的性質,可以實現原型式的繼承
• **示例代碼1 : **

<script>
    //1. 提供一個構造函數
    function Person(name,age) {
        this.name = name;
        this.age = age;
    }

    //2. 設置原型對象的屬性
    Person.prototype.className = "逍遙派1班";

    //3. 使用構造函數來創建原型對象
    var p1 = new Person("張三",10);
    var p2 = new Person("李四",20);

    //4. 打印p1和p2對象中的className屬性
    console.log(p1.className);
    console.log(p2.className);

    //結論:對象p1和p2繼承了構造函數原型對象中的屬性className
    //但是這并不是嚴格意義上的繼承
</script>

• **示例代碼2 : **

<script>
    //1. 提供一個構造函數
    function Person(name,age) {
        this.name = name;
        this.age = age;
    }

    //2. 設置原型對象的屬性
    Person.prototype = {
        constructor:Person,
        className:"逍遙派1班"
    };

    //3. 使用構造函數來創建原型對象
    var p1 = new Person("張三",10);
    var p2 = new Person("李四",20);

    //4. 打印p1和p2對象中的className屬性
    console.log(p1.className);
    console.log(p2.className);

    //結論:對象p1和p2繼承了構造函數原型對象中的屬性className
    //注意:使用原型替換的方式實現繼承的時候,原有原型對象中的屬性和方法會丟失
</script>

**示例代碼3 : **

<script>
    //1. 提供超類型|父類型
    function SuperClass() {
        this.name = 'SuperClass的名稱';
        this.showName = function () {
            console.log(this.name);
        }
    }

    //2. 設置父類型的原型屬性和原型方法
    SuperClass.prototype.info = 'SuperClass的信息';
    SuperClass.prototype.showInfo = function () {
        console.log(this.info);
    };

    //3. 提供子類型
    function SubClass() {
    }

    //4. 設置繼承(原型對象繼承)
    SubClass.prototype = SuperClass.prototype;
    SubClass.prototype.constructor = SubClass;

    var sub = new SubClass();
    console.log(sub.name);          //undefined
    console.log(sub.info);          //SuperClass的信息
    sub.showInfo();                 //SuperClass的信息
    sub.showName();                 //sub.showName is not a function
</script>

• 存在的問題 :

1.構造器屬性指向(默認指向的是父構造函數)
2.無法獲得實例屬性和方法,只能繼承(獲得)父構造函數原型對象的屬性和方法

• **擴展內置對象 **
  要給數組擴展一個name的屬性和一個sayHello方法
• 示例代碼 :

<script>
    //1. 創建數組對象
    var arr = [1,2,3];
    var arr2 = new Array(1,2,3);
    console.log(arr2);

    //2. 設置Array構造函數的原型對象
    Array.prototype.name = "默認的名稱";
    Array.prototype.sayHello = function () {
        console.log("hello");
    };

    console.log(arr.name);  //默認的名稱
    console.log(arr2.name); //默認的名稱
    arr.sayHello();         //hello
    arr2.sayHello();        //hello


    //1.上面的方式可以達到擴展內置對象的效果,但不推薦這樣去做
    //2.遇到那種大項目可能需要多人合作一起開發,而且項目中的代碼數量可能非常龐大
    //3.如果大家都通過這種方式來擴展內置對象,那么日后必將難以管理,而且可能會出現方法被覆蓋等安全問題
</script>

• 安全的擴展內置對象

核心過程
1.提供一個構造函數（自定義）
2.設置構造函數的原型對象為內置構造函數創建出來的對象

• 示例代碼 :

    //Array
    function MyArray(){};
    //設置原型對象
    MyArray.prototype = new Array();
    MyArray.prototype.des = "描述信息";
    MyArray.prototype.logDes = function(){
        console.log(this.des);
    }

    //使用自己的構造函數來創建對象
    var myArr01 = new MyArray();
    var myArr02 = new MyArray();
    myArr01.push("123","abc");
    console.log(myArr01);
    console.log(myArr01.des);


    function OtherArray(){};
    OtherArray.prototype = new Array();
    OtherArray.prototype.des = "描述信息";
    OtherArray.prototype.logDes = function(){
        console.log("------------");
    }

    var otherArr01 = new OtherArray();
    var otherArr02 = new OtherArray();

    console.log(otherArr01.des);
    otherArr01.logDes();

• 圖解

**安全擴展內置對象**

原型鏈繼承 ( 什么是原型鏈 ? )

• 每個對象都是由構造函數創建出來的，因為每個對象都有構造函數

• 每個構造函數都有一個與之對應的原型對象

• 原型對象本身也是對象

• 因此，原型對象也有自己的構造函數

• 原型對象的構造函數也有自己的原型對象

• 原型對象的構造函數的原型對象也是對象，所以它也有自己的構造函數

• 原型對象的構造函數的原型對象的構造函數也有自己的原型對象。
  以上，形成一個鏈式的結構，就稱為是原型鏈

• 原型鏈的頂端是Object.prototype,Object.prototype本身也是一個對象，因此也有原型對象
  Object.prototype.__proto__ 是null

• 原型鏈的搜索規則 :

是向上查找,如果有直接使用,如果沒有,繼續向上查找.直到找到原型鏈的頂端
原型鏈搜索的路徑越長，查詢屬性所花費的時間就越多
原則：就近原型
**

• 繼承方法

1.提供一個父構造函數
2.提供子構造函數
3.設置子構造函數的原型對象為父構造函數的一個實例對象
4.在這個實例對象上面設置屬性和方法

• **示例代碼 : **

<script>
    function A(){
        this.age = 55;
        this.showAge = function(){
            console.log(this.age);
        }
    };

    //設置A的屬性和方法
    A.prototype.logDes = function(){
        console.log("des");
    }

    function B(){

    };
    //設置原型鏈繼承
    B.prototype = new A();
    B.prototype.des = "des";
    B.prototype.show = function(){
        console.log("show");
    };

    var b1 = new B();
    console.log(b1.age);
    b1.showAge();
    b1.logDes();
    console.log(b1);
</script>

• 復雜的原型鏈

1.提供構造函數（4）
2.設置屬性和方法（建議：屬性設置在實例上，方法設置在原型上）
3.設置繼承
4.修正構造器屬性

• 示例代碼 :

<script>
    Animal.prototype.run = function(){
        console.log("run");
    }
    function Animal(color){
        this.color = color
    }

    Person.prototype = new Animal();
    Person.prototype.eat = function(){
        console.log("chi");
    }
    Person.prototype.constructor = Person;

    function Person(){
        this.name = "默認的名稱"
    }

    Student.prototype = new Person();
    Student.prototype.study = function(){
        console.log("good good study, day day up");
    }
    Student.prototype.constructor = Student;

    function Student(){
        this.id = "20160501"
    }

    Boy.prototype = new Student();
    Boy.prototype.lol = function(){
        console.log("LoL");
    }
    Boy.prototype.constructor = Boy;

    function Boy(){
        this.sex = "男"
    }

    //創建對象
    var boy = new Boy("紅色");
    console.log(boy);
</script>

• 原型鏈繼承的注意點

1.注意必須要在設置子對象的原型屬性和原型方法之前來實現繼承
2.在子對象的原型對象中可以設置同名的屬性或方法,覆蓋父對象的原型對象中的屬性和方法
3.原型鏈繼承之后,使用字面量的方式來設置原型會導致之前的原型對象丟失

• 示例代碼1

<script>
    //注意點
    //如果代碼段2==>代碼段1 則運行正常,,如果代碼段1==>代碼段2,則報錯'eat方法不存在'
     function Person() {};

     Person.prototype.run = function () {
        console.log('Person__run');
     };

     function Man() {};


     //代碼段1
     Man.prototype.eat = function () {
        console.log('Man__eat');
     };

    //代碼段2
    Man.prototype = new Person(); //設置原型鏈繼承

     var m = new Man();
     m.run();                //Person__run
     m.eat();                //Man__eat

    //建議:在設置完原型鏈繼承之后,再設置子對象原型對象上面的屬性和方法,否則會丟失(之前的原型對象被切斷)
</script>

• 示例代碼2 :

<script>
    // 注意點2 && 注意點3
    // 在子對象中(原型對象中)可以重寫父對象中(原型對象中)的方法
    // 子對象在調用的時候原型對象中的方法會覆蓋父對象原型對象中的
    // 方法,父類型的實例調用方法不受影響

     function Person() {};
     Person.prototype.run = function () {
        console.log('Person__run');
     };

     function Man() {};

     //代碼段2
     Man.prototype = new Person(); //設置原型鏈繼承
     Man.prototype.run = function () {
     console.log('Man__run');
     };

     var m = new Man();
     m.run();                //Man__run
     var p = new Person();
     p.run();                //Person__run

</script>

-示例代碼3 :

<script>
    // 在重寫原型對象實現繼承之后,不能使用字面量的方式來設置原型對象,
    // 否則之前的原型繼承關系會被切斷
    function Person() {};
    Person.prototype.run = function () {
        console.log('Person__run');
    };

    function Man() {};

    //代碼段2
    Man.prototype = new Person(); //設置原型鏈繼承
    Man.prototype = {
        eat:function () {
            console.log('Man__eat');
        }
    }

    var m = new Man();
    m.eat();    //Man__eat
    m.run();    //調用的方法不存在
</script>

• 原型鏈繼承存在的問題

1.父類型實例屬性會轉換為子類型原型的原型屬性，而如果父類型是實例屬性是引用類型則會存在共享問題
2.在創建子類型的實例時，不能向父類型的構造函數中傳遞參數

• ** 示例代碼 : **

<script>
    //1. 提供父類型的構造函數
    function SuperType() {
        //2. 在構造函數中中設置實例屬性,該屬性為引用類型
        this.family = ['哥哥','姐姐','爸爸','媽媽'];
    };

    //3. 提供子類型的構造函數
    function SubType() {};

    //4. 設置原型繼承
    SubType.prototype = new SuperType();

    //5. 創建父類型的實例對象,并對內部的實例化屬性進行修改
    var subDemo1 = new SubType();
    var subDemo2 = new SubType();

    console.log(subDemo1);
    alert(subDemo1.family);    //哥哥,姐姐,爸爸,媽媽
    alert(subDemo2.family);      //哥哥,姐姐,爸爸,媽媽

    subDemo1.family.push('爺爺','奶奶');
    alert(subDemo1.family);    //哥哥,姐姐,爸爸,媽媽,爺爺,奶奶
    alert(subDemo2.family);    //哥哥,姐姐,爸爸,媽媽,爺爺,奶奶

    //6. 如果父類型的實例屬性中有引用類型,那么在子類型創建的實例對象中存在共享問題
</script>

• Object.Create
• 作用：創建對象，并且設置該對象的原型對象
• 兼容性問題：ES5
• 基本用法
• **示例代碼1 : **

<script>
    //JavaScript語言精粹
    function create(o) {
        var F = function () {};
        F.prototype = o;
        return new F();
    }

    var obj1 = create({name:"默認的名字"});
    console.log(obj1);

    //把參數(對象)作為新對象的原型對象
    var obj = Object.create({name:"默認的名字"});
    console.log(obj);
    //需要考慮到瀏覽器兼容的問題
</script>

• 實例代碼2 : 若不兼容則動態添加create方法

<script>
    var tmp = {age:20};
    if (Object.create){
        //如果有值那么就直接調用
        var o = Object.create(tmp)
    }
    else{
        Object.create = function () {
            var F = function () {};
            F.prototype = tmp;
            var o = new F();
        }
    }
</script>

• **示例代碼3 : 使用函數來封裝 **

<script>
    function create(o) {
        if (Object.create)
        {
            //如果有值那么就直接調用
            return Object.create(o)
        }else
        {
            var F = function () {};
            F.prototype = o;
            return F();
        }
    }
    var a = create({name:"默認的名字",age:20});
    console.log(a);
</script>

• call && apply函數 ==> 重點

**1.這兩個方法都是原型對象上面的方法 -- 借用其他對象的方法
2.call和apply兩個函數的作用是一樣的，都可以用來借用方法
參數：
第一個參數是調用該方法的對象（函數內部的this綁定的對象）
后面的參數：
call:參數列表
apply:數組
3.調用方法
對象1.方法.call(調用方法的真正的對象，參數1，參數2，參數3)；

對象1.方法.apply(調用方法的真正的對象，[參數1，參數2，參數3..]);**

• **示例代碼 : **

<script>
    //console.log(Function.prototype);
    var demo01 = {
        name:"小偷",
        showName:function(param1,param2){
            console.log(this.name,param1,param2);
        }
    }
    var demo02 = {
        name:"我是老實人"
    }

    demo01.showName("小賊","毛賊");
    demo01.showName.call(demo02,"江洋大盜","采花大盜");
    demo01.showName.apply(demo02,["山賊","土匪"]);
</script>

• 關于this

1.javaScript中的this總是指向一個對象。
2.調用方式 :
2.1作為對象的方法來調用 this--->當前的對象
2.2作為普通的函數調用 this--->window
2.3作為構造函數和new使用 this--->構造函數內部新創建的對象
2.4被call或者是apply調用（函數上下文調用） this--->第一個參數

• ** 示例代碼1 : 當函數作為對象的方法調用時,this指向該對象**

<script>
    var obj = {
        name:"張三",
        demoFunc:function () {
            console.log(this == obj);       //true
            console.log(this.name);         //張三
        }
    }
    obj.demoFunc();
</script>

• 示例代碼2 : 當函數作為普通函數調用是,this總是指向全局對象

<script>
    window.name = "window測試的name";
    var funcName = function () {
        console.log(this.name);     //window測試的name
    }
    funcName();
</script>

• 示例代碼3: 使用new 構造函數創建對象調用,this總是指向內部默認創建并返回的對象

<script>
    function Person() {
        this.name = "默認的姓名"
    }

    var p1 = new Person();
    console.log(p1.name);   //默認的姓名
</script>

• ** 實例代碼4: Function.prototype.call或Function.prototype.apply調用**

<script>
    var obj = {
        name:"張三",
        getName:function () {
            console.log(this.name);
        }
    }
    obj.getName();      //張三
    var obj2 = {name:"李四"};
    obj.getName.call(obj2); //打印李四
</script>

借用構造函數繼承

• 借用構造函數實現繼承：可以獲得父構造函數中的實例屬性，解決了傳參的問題
• 示例代碼 :

<script>
    function Person(name,age){
        this.name = name;
        this.age = age;
    };
    function Boy(bookName,name,age){
        this.bookName = bookName;
        //Person.call(this,"八戒",600);  //借用構造函數
        Person.call(this,name,age);
    }

    //創建對象
    var boy = new Boy("水煮三國","悟空",600);
    var boy02 = new Boy("大話西游","云風",40);
    console.log(boy);
    console.log(boy02);
</script>

組合(原型鏈 + 借用)繼承

• 借用構造函數實現繼承：可以獲得父構造函數中的實例屬性
  Person.call(this,name,age)

• 獲得原型屬性和方法 ( Boy.prototype = Person.prototype)

• 組合繼承：原型 + 借用構造函數

• **示例代碼 : **

<script>
    function Person(name,age){
        this.name = name;
        this.age = age;
    };
    Person.prototype.des = "描述信息";
    Person.prototype.logDes = function(){
        console.log(this.des);
    };

    function Boy(bookName,name,age){
        this.bookName = bookName;
        //Person.call(this,"八戒",600);  //借用構造函數
        Person.call(this,name,age);
    }

    //設置原型繼承
    //Boy.prototype = new Person();
    Boy.prototype = Person.prototype;

    //創建對象
    var boy = new Boy("水煮三國","悟空",600);
    var boy02 = new Boy("大話西游","云風",40);
    console.log(boy);
    console.log(boy02);
    boy.logDes();

    var p1 = new Person();
    p1.logDes();

    Boy.prototype.des = "描述信息-bOY";
    boy.logDes();
    p1.logDes();
</script>

深拷貝和淺拷貝

• **示例代碼 : 淺拷貝 **

<script>
    var obj = {
        name:"小花臉",
        car:{
            type:"客車"
        }
    };
    var o = {};
    for (var k in obj)
    {
        o[k] = obj[k];
    }

    console.log(o);
    o.car.type = "銀河戰艦";
    console.log(obj);
</script>

• 深拷貝

**1.提供一個函數，兩個參數（原對象，要拷貝屬性的對象）
2.在函數中先檢查第一個參數是否有值，如果沒有值那么就初始化一個空的對象
3.for..in循環來變量參數2,

3.1檢查當前的屬性值是什么類型
3.2如果是值類型，那么就直接拷貝賦值
3.3如果是引用類型，那么就再調用一次這個方法，去內部拷貝這個對象的所有屬性**

• 示例代碼 : 深拷貝封裝

<script  >
    var obj = {
        name:"小花臉",
        car:{
            type:"客車",
        },
        friends:["1","2","3"]
    };

    //兼容性處理
    if(typeof Array.isArray != "function") {
        Array.isArray = function(obj){
            return Object.prototype.toString.call(obj) == "[object Array]";
        }
    }

    var o = {};
    //deepCopy(o,obj);
    function deepCopy(obj1,obj2) {
        obj1 = obj1 || {};
        for (var i in obj2)
        {
            if (obj2.hasOwnProperty(i))
            {
                if( typeof obj2[i] == "object")
                {
                    //判斷是數組還是對象
                    obj1[i] = Array.isArray(obj2[i])?[]:{};
                    //引用類型
                    deepCopy(obj1[i],obj2[i]);   //函數調用
                }else
                {
                    //值類型
                    obj1[i] = obj2[i];
                }
            }
        }
    }

    deepCopy(o,obj);
    console.log(o);

    //共享問題
    //o.car.type = "小貨車";
    console.log(obj);
</script>

通過深拷貝實現繼承

• 完整的繼承方案

1.擁有父構造函數的實例屬性
2.擁有父構造函數的原型屬性
3.是相互獨立的，彼此不受影響

• ** 示例代碼 : **

<script>
    if(typeof Array.isArray != "function") {
        Array.isArray = function(obj){
            return Object.prototype.toString.call(obj) == "[object Array]";
        }
    }
    function deepCopy(obj1,obj2) {
        obj1 = obj1 || {};
        for (var i in obj2)
        {
            if (obj2.hasOwnProperty(i))
            {
                if( typeof obj2[i] == "object")
                {
                    //判斷是數組還是對象
                    obj1[i] = Array.isArray(obj2[i])?[]:{};
                    //引用類型
                    deepCopy(obj1[i],obj2[i]);   //函數調用
                }else
                {
                    //值類型
                    obj1[i] = obj2[i];
                }
            }
        }
    }

    function Person(name,age){
        this.name = name;
        this.age = age;
    };
    Person.prototype.des = "描述信息";
    Person.prototype.car = {
        type:"汽車"
    }
    Person.prototype.logDes = function(){
        console.log(this.des);
    };

    function Boy(bookName,name,age){
        this.bookName = bookName;
        //Person.call(this,"悟空",600);  //借用構造函數
        Person.call(this,name,age);
    }

    //設置原型繼承
    //Boy.prototype = Person.prototype;
    deepCopy(Boy.prototype,Person.prototype);  //把父構造函數原型對象上面的屬性和方法全部拷貝一份給Boy

    //創建對象
    var boy01 = new Boy("水煮三國","悟空",600);
    var boy02 = new Boy("大話西游","云風",40);

    Boy.prototype.car.type = "火車";
    console.log(Boy.prototype);

    var p1 = new Person();
    console.log(p1.car.type);
</script>

基本包裝類型

• String Number Boolean
• **示例代碼 : **

<script>
    //1. 創建字符串對象
    var str1 = new String("demo01");  //object
    var str2 = "demo01";              //string
    var str3 = String("demo01");     //string(正確) | object

    console.log(typeof str1);
    console.log(typeof str2);
    console.log(typeof str3);

    //2. 創建數字對象
    var num1 = new Number(10);      //object
    var num2 = 10;                  //number
    var num3 = Number(20);          //number

    //3. 布爾類型的對象
    var bool01 = new Boolean(true); //object
    var bool02 = true;              //boolean
    var bool03 = Boolean(true);
    console.log(typeof bool01);

    //4. 特殊的創建方式
    var str4 = new Object("demo01");    //object | string
    var num4 = new Object(10);
    var bool04 = new Object(true);

    console.log(typeof str4);
</script>

• 基本包裝類型注意點:

<script>
    var str1 = "demo01";                      //string
    var str2 = new String("demo01");          //object
    var str3 = String("demo01");

    console.log(str1 == str2);  //true  轉換
    console.log(str1 === str2); //false

    console.log(str1.length);   //6 獲得字符串的長度
    //基本數據類型的值怎么能夠訪問屬性呢？
    //屬性和方法只有對象才有

    //為什么？
    //字符串、數值以及布爾值在訪問屬性或者調用方法的時候
    //1. 內部會隱式的創建一個對象，利用該對象來訪問屬性或者是調用方法
    //2. 得到結果之后，把結果賦值給基本數據類型的值
    //3. 銷毀這個創建的對象

    str1.des = "描述信息";
    console.log(str1.des);            //undefined

    str2.des = "des";
    console.log(str2.des);           //des(正確的) | undefined
</script>

• 總結

1.變量的方式調用成功
2.表達式的方式調用成功
3.數值的方式調用失敗

• **示例代碼 : **

<script>
    Number.prototype.sum = function(param){
        return this + param;
    }

    var num1= new Number("10");
    var num2 = 30;

    console.log(num1.sum(2));
    console.log(num1.sum(33));
    console.log(num2.sum(44));  //可以調用嗎？ 74

    console.log((10).sum(11));      //可以調用嗎？  （）表達式  21
    console.log(10.sum(22));        //不可以調用
</script>

附思維導圖一張,希望能幫到各位 ! 如果圖片不清晰的話 請下載到本地查看

Js - 面向對象編程三