JS實(shí)現(xiàn)繼承的方式

• 1.屬性拷貝
• 2.原型式繼承
• 3.原型鏈繼承
• 4.借用構(gòu)造函數(shù)繼承|偽對(duì)象繼承|經(jīng)典點(diǎn)繼承
• 5.組合繼承
• 6.Object.create()
• 7.完全拷貝

屬性繼承

• 混入式繼承/ 屬性拷貝(兩種方式)
• 特點(diǎn): 屬性是引用類型,數(shù)據(jù)會(huì)共享
  • for --- in 循環(huán)

var obj = {
    name :'zs'
    ,age:20,
    friends:['小明','小紅']
}

var obj1 = {};

for(var key in obj){
    obj1[key] = obj[key]
}

obj1.friends.push('老王')

console.log(obj1);
console.log(obj);

// 如果屬性是引用類型的數(shù)據(jù),子對(duì)象和父對(duì)象會(huì)共享同一份數(shù)據(jù),修改其中一個(gè),會(huì)影響另外一個(gè)

• 函數(shù)拷貝屬性/ 相當(dāng)于函數(shù)封裝了for..in
• ES6 后才開始支持
• 語法Object.assign(o,obj,obj1)
  • 第一個(gè)參數(shù)傳目標(biāo)對(duì)象
  • 后面參數(shù)是要拷貝屬性的對(duì)象

var obj = {name:'zs'};
var obj1 = {age:20};

var o = {};

// 第一個(gè)參數(shù):目標(biāo)對(duì)象
//后面參數(shù):要拷貝屬性的對(duì)象
Object.assign(o,obj,obj1);

console.log(o);

原型式繼承

特點(diǎn):

• 1.不能獲取實(shí)例屬性和實(shí)例方法,只能獲取父構(gòu)造函數(shù)原型對(duì)象的屬性和方法
• 2.無法修正構(gòu)造器屬性,默認(rèn)指向父構(gòu)造函數(shù)

設(shè)置子構(gòu)造函數(shù)的原型對(duì)象是父構(gòu)造函數(shù)的原型對(duì)象---->原型式繼承

• 1.構(gòu)造函數(shù)創(chuàng)建對(duì)象訪問原型屬性

function Person() {
    
}
// 利用構(gòu)造函數(shù)創(chuàng)建出來的對(duì)象可以使用原型對(duì)象的屬性和方法
Person.prototype.des = 'des';
var p1 = new Person();
console.log(p1.des);

• 2.替換原型
• 3.原型對(duì)象替換原型

//1.提供一個(gè)父構(gòu)造函數(shù)
function Person() {
    this.name = '默認(rèn)';
}
Person.prototype.des = 'aaa';
//2.提供一個(gè)子構(gòu)造函數(shù)
function stu() {
    
}
// 設(shè)置子構(gòu)造函數(shù)的原型對(duì)象是父構(gòu)造函數(shù)的原型對(duì)象---->原型式繼承
stu.prototype = Person.prototype;

var s1 = new Stu();
console.log(s1.des);

擴(kuò)展內(nèi)置對(duì)象

• 給所有內(nèi)置的對(duì)象添加屬性或方法
• Object Array Date Function String..

    // 需求 arr1有一個(gè)des屬性和logDes方法
    var  arr1 = [1,2,3,4];
    arr1.des = 'des';
    arr1.logDes = function () {
        console.log(this.des);
    }
    
    console.loe(arr1.des);
    
    var arr2 = [5,6,7];
    arr2.des = 'des';
    arr2.logDes = function () {
        console.log(this.des);
    }
    
    // 需求  所有數(shù)組都添加一個(gè)des屬性和logDes方法
    Array.prototype.des = 'des';
    Array.prototype.logDes = function() {
        console.log(this.des);
    }
    var arr3 = [3,4,5];
    var arr4 = [6,7,8];
    console.log(arr3.des);
    console.log(arr4.des);

    //通過這種方式確實(shí)可以擴(kuò)展內(nèi)置對(duì)象,但是不建議這樣做
    // 因?yàn)樵诠鹃_發(fā)中,很可能是多人一起開發(fā),而且項(xiàng)目的代碼量可能非常多
    //如果人人都通過這種方式擴(kuò)展內(nèi)置對(duì)象,不方便項(xiàng)目日后的維護(hù),很容易出現(xiàn)方法被覆蓋的問題

安全的擴(kuò)展內(nèi)置對(duì)象

• 1.提供一個(gè)構(gòu)造函數(shù)
• 2..設(shè)置這個(gè)構(gòu)造函數(shù)的原型對(duì)象是內(nèi)置構(gòu)造函數(shù)的一個(gè)實(shí)例

function MyArray() {
    
}
MyArray.prototype = []//new Array();
MyArray.prototype.des = 'des';
MyArray.prototype.logDes = function (){
console.log(this.des);
}

var myarr1 = new MyArray();
myarr1.push('小明');
console.log(myarr1);
console.log(myarr1.des);

;

原型鏈(畫圖理解)

• 1.每一個(gè)對(duì)象都是由構(gòu)造函數(shù)創(chuàng)建的
• 2.每一個(gè)構(gòu)造函數(shù)都有對(duì)應(yīng)的原型對(duì)象
• 3.原型對(duì)象也是一個(gè)對(duì)象,也是由構(gòu)造函數(shù)創(chuàng)建出來的
• 4.這個(gè)構(gòu)造函數(shù)也有自己的原型對(duì)象,這個(gè)原型對(duì)象也是有個(gè)對(duì)象,也是由構(gòu)造函數(shù)創(chuàng)建出來的
• 以上就形成一個(gè)鏈?zhǔn)降慕Y(jié)構(gòu),稱為原型鏈
• 原型鏈的頂端是Object的原型對(duì)象
• (Object的原型對(duì)象也是由構(gòu)造函數(shù)創(chuàng)建出來的,它的原型對(duì)象指向null)

原型鏈中屬性的訪問原則(就近原則)

• 通過對(duì)象.屬性訪問屬性的時(shí)候,首先會(huì)查找自身,如果有就直接使用
• 如果沒有,會(huì)查找原型對(duì)象,如果有就直接使用
• 如果原型對(duì)象也沒有,會(huì)查找原型對(duì)象的原型對(duì)象,如果有就直接使用
• 如果還沒有會(huì)繼續(xù)向上查找,知道原型鏈的頂端(Object.prototype)
• 如果還沒有,返回undefined(屬性)或者報(bào)錯(cuò)(調(diào)用方法)

原型鏈繼承

特點(diǎn)

• 1.對(duì)比原型式繼承,他還可以繼承父構(gòu)造函數(shù)的實(shí)例屬性,方法和原型對(duì)象
• 2.對(duì)比原型式繼承,他可以修正構(gòu)造器屬性constructor

• 1.提供一個(gè)父構(gòu)造函數(shù)和子構(gòu)造函數(shù)
• 2.設(shè)置子構(gòu)造函數(shù)的原型的對(duì)象好似父構(gòu)造函數(shù)的一個(gè)實(shí)例 --->原型鏈繼承

//1.提供一個(gè)父構(gòu)造函數(shù)和子構(gòu)造函數(shù)
function Person() {
    this.name = '默認(rèn)';
}
Person.prototype.des = 'des';

function Stu() {
    
}
// 2.原型鏈繼承
Stu.prototype = new Person();

var s1 = new Stu();
console.log(s1.des);//des
console.log(s1.name);//默認(rèn)

原型鏈注意點(diǎn)

• 1.注意修正構(gòu)造器要在原型鏈繼承之后(涉及到替換對(duì)象的地址變更)
• 2.同理,要給當(dāng)前對(duì)象的原型對(duì)象設(shè)置屬性或方法,要在設(shè)置原型鏈繼承之后
• 3.在原型鏈繼承后,只能在原型鏈的基礎(chǔ)上動(dòng)態(tài)添加和修改屬性和方法,如果用替換對(duì)象會(huì)破壞原型鏈繼承

原型鏈繼承的問題

• 1.無法傳遞參數(shù)給父構(gòu)造函數(shù)
• 2.繼承過來的實(shí)例屬性會(huì)變?yōu)樵蛯傩?就有數(shù)據(jù)共享的問題

Object.create()方法

• 創(chuàng)建一個(gè)新的對(duì)象,并設(shè)置這個(gè)對(duì)象的原型對(duì)象
• ES5 支持

    var obj = {name:'zs',age:20};
    
    //創(chuàng)建一個(gè)新的對(duì)象,并設(shè)置這個(gè)對(duì)象的原型對(duì)象
    var o = Object.create(obj);
    console.log(o.name);

• 兼容性處理

  var obj = {name:'zs',age:20};
  // 兼容性處理
  if(Object.create){
      var o = Object.create(obj);
  }else{
      // 非標(biāo)準(zhǔn)方法
      //var o = new Object();
      //o._protp_ = obj;
      
      // 標(biāo)準(zhǔn)方法  可封裝
      function F() {
          
      }
      F.prototype = obj;
      var o = new F();
  }
  

• 兼容性函數(shù)封裝

  function createObj(obj){
      if(Object.create){
          return Object.create(obj);
      }else{
          function F(){
          }
          F.prototype=obj;
          return new F()
      }
  }
  

• 方法二:處理兼容性 給Object添加方法(要放在使用方法前面)

  if(!Object.create){
      Object.create = function (obj){
          function F(){
          }
          F.prototype=obj;
          return new F() 
      }
  }
  

call和apply函數(shù)

• 1.在ES3的時(shí)候,系統(tǒng)給Function的原型隊(duì)形添加了call和apply函數(shù)

• 2.作用:借用其他對(duì)象的方法

• call(調(diào)用對(duì)象,參數(shù)1,參數(shù)2(參數(shù)類表)

  • 語法: 借用對(duì)象.借用方法.call(調(diào)用對(duì)象,參數(shù)1,參數(shù)2(參數(shù)類表)

• apply(調(diào)用對(duì)象,參數(shù)數(shù)組)

  • 語法: 借用對(duì)象.借用方法.apply(調(diào)用對(duì)象,參數(shù)數(shù)組)

var zs = {
    name:'zs',
    showName : function (p1,p2){
        console.log(this.name,p1,p2)
    }
}

var ls = {
    name: 'ls'
}

zs.showNam('憨厚','耿直');
// 無法直接訪問
//ls.showNam('智商高','情商低') // 報(bào)錯(cuò)

zs.showName.call(ls,'智商高','情商低')
zs.showName.apply(ls,['智商高','情商低'])

借用構(gòu)造函數(shù)繼承 | 經(jīng)典繼承 | 偽對(duì)象繼承

• 只能獲取實(shí)例屬性和實(shí)例方法,不能獲取原型屬性和屬性方法
• 本質(zhì)是借用執(zhí)行父構(gòu)造函數(shù)的函數(shù)把this傳入

    function Person(name,age){
        this.name = name;
        this.age = age;
    }
     Person.prototype.des= 'des';
    
    function stu(num,name,age){
        this.num = num;
        // 借用構(gòu)造函數(shù)繼承
        Person.call(this,name,age)
    }

    var s1 = new stu(10086,'zs',20);
    var s2 = new stu(1002,'ls',22);
    
    console.log(s1);
    console.log(s2);
    
    console.log(s1.des);
    console.log(s2.des);

組成繼承

特點(diǎn)(利用借用構(gòu)造函數(shù)繼承)

• 1.解決了原型鏈參數(shù)傳遞給父構(gòu)造函數(shù)的問題
• 2.解決了原型鏈繼承所得的原型對(duì)象的數(shù)據(jù)共享問題

• 1.利用借用構(gòu)造函數(shù)繼承獲取實(shí)例屬性和方法
• 2.再獲取原型屬性和方法

    function Person(name){
        this.name = name;
    }
    Person.prototype.des= 'des';
    
    function stu(num,name){
        this.num = num;
        // 借用構(gòu)造函數(shù)繼承
        Person.call(this,name)
    }
    
    // 原型式繼承
    Stu.prototype = Person.prototype
    
    // 原型鏈繼承
    Stu.prototype = new Person()
    Stu.prototype.constructor = stu;
    
    var s1 = new stu(10086,'zs');
    
    console.log(s1.name);
    console.log(s1.des);

深拷貝和淺拷貝

• 淺拷貝(地址拷貝)(指針拷貝)
  • 引用類型的屬性,把地址拷貝
• 深拷貝(內(nèi)容拷貝, 完全拷貝)
  • 引用類型的屬性,拷貝內(nèi)容,過程要實(shí)現(xiàn)
  • 1.提供一個(gè)函數(shù),有2個(gè)參數(shù)(目標(biāo)對(duì)象,要拷貝屬性的對(duì)象)
  • 2.判斷第一個(gè)參數(shù)是否有值,如果沒值,就初始化一個(gè)空點(diǎn)的對(duì)象
  • 3.遍歷第二參數(shù),判斷屬性值的類型
    • 1.值類型的,直接賦值
    • 2.引用類型的,再一次調(diào)用這個(gè)方法去拷貝存儲(chǔ)的內(nèi)容

  function deepCopy(obj,copyObj){
      obj = obj || {};
      
      for(var key in copyObj){
          if(typeof copyObj[key] == 'object'){
              obj[key] = {};
              //引用類型的數(shù)據(jù)
              deepCopy(obj[key],copyObj[key])
          }else{
              // 值類型
              obj[key]=copyObj[key]
          }
      }
  }
  

Array.isArray()

• 判斷一個(gè)對(duì)象是否是數(shù)組

• ES5支持

• 在ES5之前是怎么判斷一個(gè)對(duì)象是數(shù)組?
  Object.prototype.toString.call(判斷對(duì)象)// [object,Array]

• 兼容性的處理

  if(!Array.isArray){
      Array.isArray = function (obj){
          return Object.prototype.toString.call(obj);
      }
  }