原型和繼承

RoOK1E發表於2018-08-16
原型繼承

原型

在JS中 函式是一個包含屬性和方法的Function型別的物件 原型prototype就是Function型別物件的一個屬性
每個函式都有一個prototype屬性, 它預設指向一個Object空物件---即:原型物件
原型物件中有一個屬性constructor, 它指向函式物件
原型是用於儲存物件的共享屬性和方法的 原型的屬性和方法並不會影響函式本身的屬性和方法

 function fn(){
 return 'hello'
}
console.log(typeof fn.prototype)   //object

獲取原型

  • 通過建構函式的prototype屬性
  function fn(){
   console.log('this is a function')
}
  console.log(fn.prototype);   //{constructor: ƒ}
  • 通過Object物件的getgetPrototypeOf()方法
function fn(){
console.log('this is a function')
}
console.log(Object.getPrototypeOf(fn));   //ƒ () { [native code] }

原型的屬性和方法

  • 原型的屬性和方法單獨進行定義
  建構函式.prototype.屬性名 = 屬性值
  建構函式.prototype.方法名 = function(){
}
  • 直接為原型定義一個新物件
  建構函式.prototype = {
  屬性名:屬性值,
  方法:function(){}
}

自有屬性與原型屬性

自有屬性:通過物件的引用新增的屬性
原型屬性:從原型物件中繼承而來 如果原型物件中屬性值改變 則所有繼承
自該原型的物件屬性都改變

 function Person(name){
 //建構函式本身的屬性 --> 自有屬性
 this.name = name;
}
//通過建構函式Person的prototype新增屬性 --> 原型屬性
 Person.prototype.age=29
 var man=new Person('林更新');
 console.log(man.name);  //林更新
 console.log(man.age)    //29

 var woman=new Person('宋佳');
 woman.age=38;
 console.log(woman.name) //宋佳
 console.log(woman.age)  //38
 Person.prototype.age=18;
 console.log(man.age)  //18
 console.log(woman.age)   //38

檢測自有 原型屬性

  • 使用hasOwnProperty()方法檢測物件是否具有指定的自有屬性
  function Person() {

    }
    var man =new Person()
    console.log(man.hasOwnProperty("name"))   //false
  • 使用in關鍵字檢測物件及其原型鏈中是否具有指定屬性
    function Person() {

    }
    var man =new Person()
    console.log("name" in man)    //false

顯示原型物件和隱式原型物件

  1. 每個函式function都有一個prototype，即顯式原型
  2. 每個例項物件都有一個__proto__，可稱為隱式原型
  3. 物件的隱式原型的值為其對應建構函式的顯式原型的值
  4. 函式的prototype屬性: 在定義函式時自動新增的, 預設值是一個空Object物件
  5. 物件的__proto__屬性: 建立物件時自動新增的, 預設值為建構函式的prototype屬性值
  6. 我們能直接操作顯式原型, 但不能直接操作隱式原型(ES6之前)
function Person() {
    this.name='MasterYi'
}
Person.prototype.age=100;
var man=new Person;
console.log(man.prototype); // undefined 表示物件中不存在該屬性
console.log(man.__proto__); // {age: 100, constructor: ƒ}

原型鏈

  1. 訪問一個物件的屬性時，先在自身屬性中查詢，找到返回
  2. 如果沒有, 再沿著__proto__這條鏈向上查詢, 找到返回
  3. 如果最終沒找到, 返回undefined
  4. __proto__這條原型查詢鏈就是原型鏈: 隱式原型鏈
  5. 讀取物件的屬性值時: 會自動到原型鏈中查詢
  6. 設定物件的屬性值時: 不會查詢原型鏈, 如果當前物件中沒有此屬性, 直接新增此屬性並設定其值
  7. 方法一般定義在原型中, 屬性一般通過建構函式定義在物件本身上

作用:用來查詢物件的屬性(方法)

相關文章