JS模擬實現封裝的三種方法

  前  言

　  繼承是使用一個子類繼承另外一個父類，那麼子類能夠自動擁有父類中的全部屬性和方法，這個過程叫作繼承！  JS中有不少實現繼承的方法，今天我給你們介紹其中的三種吧。

 

1.在 Object類上增長一個擴展方法

 

//聲明一個父類
function Person(name,age){
    this.name=name;
    this.age=age;
    this.say=function(){
         alert("我叫"+this.name);
    }
}
//聲明一個子類   
function Student(no){
    this.no=no;
    this.study=function(){
        alert("我在學習！");
    }
}
// 經過循壞，將父類對象的全部屬性和方法，所有賦給子類對象
Object.prototype.extend=function(parent){
    for(var i in parent){
          this[i].parent[i];
    }
}
var p=new Person("張三",12);
var s=new Student("1234567");
//子類對象調用這個擴展方法
s.extend()
console.log(s);

 

上述實現繼承的原理：

經過循壞，將父類對象的全部屬性和方法，所有賦給子類對象。關鍵點在於for-in循壞，即便不擴展Object,也能經過簡單的循壞實現操做。

可是用這種方法實現繼承也有一些缺點：
①沒法經過一次實例化，直接拿到完整的子類對象。而須要先拿到父類對象和子類對象兩個對象，再手動合併；
②擴展Object的繼承方法，也會保留在子類的對象上。

再來看看第二種實現繼承的方法吧~

 

2.使用原型繼承

在介紹這種方法以前先來講兩個概念：原型對象與原型

一、prototype:函數的原型對象
①只有函數纔有prototype，並且全部函數必有prototype
②prototype自己也是一個對象！
③prototype指向了當前函數所在的引用地址！

二、__proto__:對象的原型！
①只有對象纔有__proto__，並且全部對象必有__proto__
②__proto__也是一個對象，因此也有本身的__proto__，順着這條線向上照的順序，就是原型鏈。
③函數、數組都是對象，都有本身的__proto__

 

//聲明父類
function Person(name,age){
      this.name=name;
      this.age=age;
      this.say=function(){
        alert("我叫"+this.name);
      }
}
//聲明子類      
function Student(no){
      this.no=no;
      this.study=function(){
        alert("我在學習！我叫"+this.name+"今年"+this.age");
      }
}
//將父類對象賦給子類的prototype    
Student.prototype=new Person("張三",14);
//拿到子類對象時，就會將父類對象的全部屬性和方法，添加到__proto__
var s=new Student();  
s.study(); 

 

 

使用原型繼承的原理：
將父類對象，賦值給子類的prototype，那麼父類對象的屬性和方法就會出如今子類的prototype中。那麼，實例化子類時，子類的prototype又會到子類對象的__proto__中，最終，父類對象的屬性和方法，會出如今子類對象的__proto__中。

這種繼承的特色：
①子類自身的全部屬性都是成員屬性，父類繼承過來的屬性都是原型屬性。
②依然沒法經過一步實例化拿到完成的子類對象。

 

第三種實現繼承的方法：

call()和apply()還有bind()，這三種方法很類似，只有在傳參方面有所不一樣。

function Person(name,age){
    this.name=name;
    this.age=age;
    this.say=function(){
        alert("我叫"+this.name);
        }
}
function Student(no,name,age){
    this.no=no;
    this.study=function(){
        alert("我在學習！");
    }
//將父類函數的this,指向爲子類函數的this
Person.call(this,name,age);
}
            
var s=new Student(12,"張三",24);
console.log(s);

三個函數的惟一區別，在於接受func的參數列表的方式不一樣，除此以外，功能上沒有任何差別！

三個函數的寫法(區別)：call寫法：func.call(func的this指向的obj,func參數1,func參數2,...);apply寫法：func.apply(func的this指向的obj,[func參數1,func參數2,...]);bind寫法：func.bind(func的this指向的obj)(func參數1,func參數2,...);