1. 程式人生 > >js面向物件3-繼承

js面向物件3-繼承

一、瞭解繼承

1.1 繼承就是後輩繼承前輩的屬性和方法

1.2 面向物件程式設計(OOP)
  JavaScript不是面向物件程式語言, 但是它的特性支援面向物件的程式設計思維。

二、繼承的方法

  1. 從父類繼承屬性和方法
    物件冒充, 模仿java中的繼承物件冒充, 模仿java中的繼承。通過改變父類的執行環境進行繼承;
	// 從父類中繼承屬性和方法
	function Father() {
	    this.say = 'hi';
	    this.fn = function () {
	        return this.say;
	    }
console.log(1); //1 } function Son() { this.name = "a"; //物件冒充 this.f = Father; //將函式Father作為子類的方法,複製的是一個函式物件的指標 this.f(); //執行函式,得到一個屬性和一個方法fn,同時會執行函式 delete this.f; //刪除這個指標連結 } var s = new Son(); console.log(s); console.log(s.fn()); //hi son存在存在了Father的方法fn

在這裡插入圖片描述
2. 通過原型鏈繼承

 原型鏈的查詢順序: 先自身查詢, 找到就結束, 沒有找到就沿著原型鏈向上查詢, 直到找到Object.prototype.proto

	function A() {
	    this.a = "A";
	    this.fn = function () {
	        return this.a;
	    }
	}
	
	function B() {
	    this.a = "B";
	}
	
	B.prototype = new A(); //將A的例項作為B的原型,原來存在於A例項的所有方法和屬性,存在於B原型prototype中
	var b = new B();
console.dir(b);

在這裡插入圖片描述

  1. 更改this指向
    apply()
    call()
    bind()
    這裡就不詳細概述了
  2. class繼承extends
	class C {
	    constructor(name) {
	        //建構函式
	        this.name = name; //給新的物件新增一個name屬性
	    }
	
	    // sayName相當於 A.prototype.sayName = function(){return this.name}
	    sayName() {
	        return this.name;
	    }
	
	}
	
	class D extends C { //D類,該類通過extends關鍵字,繼承了C類的所有屬性和方法
	
	}
	
	var newc = new D("haode");
	console.log(newc.name); //"haode"
	console.log(newc.sayName()); //"haode"