js中的幾種繼承實現

時飛發布于2019-08-19 17:31 / 1159人閱讀

摘要：使用關鍵字熟悉的同學應該非常熟悉這個關鍵字，中的繼承都是靠它實現的。新加入的關鍵字是語法糖，本質還是函數使用修改之前的例子，將會更簡單在下面的例子，定義了一個名為的類，然后定義了一個繼承于的類。

使用Object.create實現類式繼承

下面是官網的一個例子

//Shape - superclass
function Shape() {
  this.x = 0;
  this.y = 0;
}

Shape.prototype.move = function(x, y) {
    this.x += x;
    this.y += y;
    console.info("Shape moved.");
};

// Rectangle - subclass
function Rectangle() {
  Shape.call(this); //call super constructor.
}

Rectangle.prototype = Object.create(Shape.prototype);

var rect = new Rectangle();

rect instanceof Rectangle //true.
rect instanceof Shape //true.

rect.move(1, 1); //Outputs, "Shape moved."

此時Rectangle原型的constructor指向父類，如需要使用自身的構造，手動指定即可，如下

Rectangle.prototype.constructor = Rectangle;

使用utilities工具包自帶的util.inherites

語法

util.inherits(constructor, superConstructor)

例子

const util = require("util");
const EventEmitter = require("events");

function MyStream() {
    EventEmitter.call(this);
}

util.inherits(MyStream, EventEmitter);

MyStream.prototype.write = function(data) {
    this.emit("data", data);
}

var stream = new MyStream();

console.log(stream instanceof EventEmitter); // true
console.log(MyStream.super_ === EventEmitter); // true

stream.on("data", (data) => {
  console.log(`Received data: "${data}"`);
})
stream.write("It works!"); // Received data: "It works!"

也很簡單的例子，其實源碼用了ES6的新特性，我們瞅一瞅

exports.inherits = function(ctor, superCtor) {

  if (ctor === undefined || ctor === null)
    throw new TypeError("The constructor to "inherits" must not be " +
                        "null or undefined");

  if (superCtor === undefined || superCtor === null)
    throw new TypeError("The super constructor to "inherits" must not " +
                        "be null or undefined");

  if (superCtor.prototype === undefined)
    throw new TypeError("The super constructor to "inherits" must " +
                        "have a prototype");

  ctor.super_ = superCtor;
  Object.setPrototypeOf(ctor.prototype, superCtor.prototype);
};

其中Object.setPrototypeOf即為ES6新特性，將一個指定的對象的原型設置為另一個對象或者null

語法

Object.setPrototypeOf(obj, prototype)

obj為將要被設置原型的一個對象
prototype為obj新的原型(可以是一個對象或者null).

如果設置成null,即為如下示例

Object.setPrototypeOf({}, null);

感覺setPrototypeOf真是人如其名啊，專門搞prototype來玩。
那么這個玩意又是如何實現的呢？此時需要借助宗師__proto__

Object.setPrototypeOf = Object.setPrototypeOf || function (obj, proto) {
  obj.__proto__ = proto;
  return obj; 
}

即把proto賦給obj.__proto__就好了。

使用extends關鍵字

熟悉java的同學應該非常熟悉這個關鍵字，java中的繼承都是靠它實現的。
ES6新加入的class關鍵字是語法糖，本質還是函數.

使用extends修改之前util.inherits的例子，將會更簡單

const EventEmitter = require("events");

class MyEmitter extends EventEmitter {}

const myEmitter = new MyEmitter();
myEmitter.on("event", function() {
  console.log("an event occurred!");
});
myEmitter.emit("event");

在下面的例子，定義了一個名為Polygon的類，然后定義了一個繼承于Polygon的類 Square。注意到在構造器使用的 super()，supper()只能在構造器中使用，super函數一定要在this可以使用之前調用。

class Polygon {
  constructor(height, width) {
    this.name = "Polygon";
    this.height = height;
    this.width = width;
  }
}

class Square extends Polygon {
  constructor(length) {
    super(length, length);
    this.name = "Square";
  }
}

使用關鍵字后就不用婆婆媽媽各種設置原型了，關鍵字已經封裝好了，很快捷方便。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/78598.html

面試--js實現繼承的幾種方式

摘要：基于原型的繼承原型上的屬性被共享了不是我們所需要的這種繼承會有如下的缺點如果父類包含有引用類型的屬性所有的子類就會共享這個屬性。基于原型的繼承 function father() { this.faName = father; this.names=[11,22] } father.prototype.getfaName = fun...

baiy 2019-08-21 16:56 評論0 收藏0
js實現繼承的幾種方式

摘要：原型鏈實現繼承例子繼承了借用構造函數基本思想在子類型構造函數的內部調用超類構造函數，通過使用和方法可以在新創建的對象上執行構造函數。前言：大多OO語言都支持兩種繼承方式：接口繼承和實現繼承，而ECMAScript中無法實現接口繼承，ECMAScript只支持實現繼承，而且其實現繼承主要是依靠原型鏈來實現。 1.原型鏈基本思想：利用原型讓一個引用類型繼承另外一個引用類型的屬性和方法。...

Alliot 2019-08-19 17:59 評論0 收藏0
JS繼承實現的幾種方式及其優缺點

摘要：原型繼承缺點子類實例共享屬性，造成實例間的屬性會相互影響可以看到子類的實例屬性皆來自于父類的一個實例，即子類共享了同一個實例共享了父類的方法構造函數繼承缺點父類的方法沒有被共享，造成內存浪費子實例的屬性都是相互獨立的實例方法也是獨立的，沒有原型繼承缺點: 子類實例共享屬性，造成實例間的屬性會相互影響 function Parent1() { this.name = [super...

ymyang 2019-08-22 11:06 評論0 收藏0
JS學習筆記（第6章）（實現繼承的幾種方式）

摘要：使用最多的繼承模式是組合繼承，這種模式使用原型鏈繼承共享的屬性和方法，而借用構造函數繼承實例屬性。原型式繼承，可以在不必預先定義構造函數的情況下實現繼承，其本質是執行給定對象的淺復制。 1、原型鏈實現繼承 function SuperType() { this.property = true; } SuperType.prototype.getSuperValue = func...

hiyayiji 2019-08-26 10:18 評論0 收藏0
js實現繼承的幾種方法

摘要：實現繼承的方法借用構造函數解決原型中包含引用類型所帶來的問題的過程中，使用借用構造函數偽造對象或經典繼承來實現繼承。繼承在ECMAScript中繼承主要是依靠原型鏈來實現的。實現繼承的方法利用原型讓一個引用類型繼承另一個引用類型的屬性和方法什么是原型鏈先要了解構造函數、原型、和實例的關系：每一個構造函數都有一個原型對象，原型對象都包含一個指向構造函數的指針，實例都包含...

pkhope 2019-08-26 11:00 評論0 收藏0