javascript的一些理解

shenhualong 發(fā)布于2019-08-22 15:03 / 1261人閱讀

摘要：基本類型引用類型原型構(gòu)造函數(shù)上有屬性，為原型對(duì)象為實(shí)例對(duì)象，每個(gè)對(duì)象上都有，而指向的是原型對(duì)象，而原型對(duì)象上有屬性，指向的是上一級(jí)的原型對(duì)象。

基本類型

String ,null,undefined,number,boolean

引用類型：
object

原型：

function People(name,sex){
    this.name=name;
    this.sex=sex;
}

people構(gòu)造函數(shù)上有屬性prototype，prototype為原型對(duì)象；

var p1=new People("canoe","girl");

p1為People實(shí)例對(duì)象，每個(gè)對(duì)象上都有__proto__，而__proto__指向的是原型對(duì)象，而原型對(duì)象上有__proto__屬性，指向的是上一級(jí)的原型對(duì)象。就這么依次向上查找，直到null

各種繼承，優(yōu)缺點(diǎn)：

1.原型鏈繼承

// 定義一個(gè)動(dòng)物類
function Animal (name) {
  // 屬性
  this.name = name || "Animal";
  // 實(shí)例方法
  this.sleep = function(){
    console.log(this.name + "正在睡覺！");
  }
}
// 原型方法
Animal.prototype.eat = function(food) {
  console.log(this.name + "正在吃：" + food);
};

核心：將父類的實(shí)例作為子類的原型

function Cat(){ 
}
Cat.prototype = new Animal();
Cat.prototype.name = "cat";

//　Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.eat("fish"));
console.log(cat.sleep());
console.log(cat instanceof Animal); //true 
console.log(cat instanceof Cat); //true

優(yōu)點(diǎn)：

子類的原型是父類的實(shí)例，關(guān)系簡(jiǎn)單

父類新增原型方法/原型屬性，子類都能訪問到

簡(jiǎn)單，易于實(shí)現(xiàn)

缺點(diǎn)：

要想為子類新增屬性和方法，必須要在new Animal()這樣的語(yǔ)句之后執(zhí)行，不能放到構(gòu)造器中

無(wú)法實(shí)現(xiàn)多繼承

來(lái)自原型對(duì)象的引用屬性是所有實(shí)例共享的

創(chuàng)建子類實(shí)例時(shí)，無(wú)法向父類構(gòu)造函數(shù)傳參

2.構(gòu)造繼承
核心：使用父類的構(gòu)造函數(shù)來(lái)增強(qiáng)子類實(shí)例，等于是復(fù)制父類的實(shí)例屬性給子類（沒用到原型）

function Cat(name){
  Animal.call(this);
  this.name = name || "Tom";
}

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // false
console.log(cat instanceof Cat); // true

優(yōu)點(diǎn)：

創(chuàng)建子類實(shí)例時(shí)，可以向父類傳遞參數(shù)

可以實(shí)現(xiàn)多繼承（call多個(gè)父類對(duì)象）

缺點(diǎn)：

實(shí)例并不是父類的實(shí)例，只是子類的實(shí)例

只能繼承父類的實(shí)例屬性和方法，不能繼承原型屬性/方法

無(wú)法實(shí)現(xiàn)函數(shù)復(fù)用，每個(gè)子類都有父類實(shí)例函數(shù)的副本，影響性能

3、實(shí)例繼承

function Cat(name){
    var instance=new Animal();
    instance.name=name||"tom";
    return instance
    
}

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); // false

優(yōu)點(diǎn)：

不限制調(diào)用方式，不管是new 子類()還是子類(),返回的對(duì)象具有相同的效果

缺點(diǎn)：

實(shí)例是父類的實(shí)例，不是子類的實(shí)例

不支持多繼承

4、組合繼承

function Cat(name){
  Animal.call(this);
  this.name = name || "Tom";
}
Cat.prototype = new Animal();
Cat.prototype.constructor=Cat;

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); // true

優(yōu)點(diǎn)：

彌補(bǔ)了方式2的缺陷，可以繼承實(shí)例屬性/方法，也可以繼承原型屬性/方法

既是子類的實(shí)例，也是父類的實(shí)例

不存在引用屬性共享問題

可傳參

函數(shù)可復(fù)用

缺點(diǎn)：

調(diào)用了兩次父類構(gòu)造函數(shù)，生成了兩份實(shí)例（子類實(shí)例將子類原型上的那份屏蔽了）

5、寄生組合繼承

核心：通過寄生方式，砍掉父類的實(shí)例屬性，這樣，在調(diào)用兩次父類的構(gòu)造的時(shí)候，就不會(huì)初始化兩次實(shí)例方法/屬性，避免的組合繼承的缺點(diǎn)

function Cat(name){
  Animal.call(this);
  this.name = name || "Tom";
}
(function(){
  // 創(chuàng)建一個(gè)沒有實(shí)例方法的類
  var Super = function(){};
  Super.prototype = Animal.prototype;
  //將實(shí)例作為子類的原型
  Cat.prototype = new Super();
})();

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); //true