JavaScript繼承

JinB 發布于2019-08-21 15:33 / 1213人閱讀

摘要：原型鏈繼承繼承，通過原型，形成鏈條得到被繼承的屬性繼續原型鏈繼承構造繼續原型鏈繼承借用構造函數類式繼承把指向同時還可以傳遞參數組合繼承對象冒充，給超類型傳參原型鏈繼承寫也行原型式繼承寄生組合式繼承創建對象增強對象只共享了方法引用問題解決

1、原型鏈繼承

function Parent() {
    this.name = "Mike"
}
function Child() {
    this.age = 12;
}
Child.prototype = new Parent();//Child繼承Parent，通過原型，形成鏈條

var test = new Child();
console.log(test.age);
console.log(test.name);//得到被繼承的屬性

//繼續原型鏈繼承
function Brother() {//brother構造
    this.weight = 60;
}
Brother.prototype = new Child();//繼續原型鏈繼承
var brother = new Brother();
console.log(brother.name);
console.log(brother.age);

2、借用構造函數（類式繼承）

function Parent(age) {
    this.name = ["Mike", "Bill", "Andy"];
    this.age = age;
}
function Child(age) {
    Parent.call(this, age);//把this指向Parent,同時還可以傳遞參數
}
var test = new Child(21);
console.log(test.name);
console.log(test.age);
test.name.push("Bill");
console.log(test.name);

3、組合繼承

function Parent(age) {
    this.name = ["Mike", "Jack", "Bill"];
    this.age = age;
}
Parent.prototype.run = function () {
    return this.name + " are both " + this.age;
};
function Child(age) {
    Parent.call(this, age);//對象冒充，給超類型傳參
}
Child.prototype = new Parent();//原型鏈繼承
var child = new Child(12);//寫new Parent(12)也行
console.log(child.run() + " years old.");

4、原型式繼承

function obj(o) {
    function F() {
    }

    F.prototype = o;
    return new F();
}
var box = {
    name: "Andy",
    arr: ["brother", "sister", "father"]
};
var b1 = obj(box);
console.log(b1.name);
console.log(b1.arr);

b1.name = "Mike";
console.log(b1.name);

b1.arr.push("mother");
console.log(b1.arr);

var b2 = obj(box);
console.log(b2.name);
console.log(b2.arr);

5、寄生組合式繼承

function obj(o) {
    function F() {
    }

    F.prototype = o;
    return new F();
}
function create(parent, test) {
    var f = obj(parent.prototype);//創建對象
    v.constructor = test;//增強對象
}
function Parent(name) {
    this.name = name;
    this.arr = ["brother", "sister", "father"]
}
Parent.prototype.run = function () {
    return this.name;
};
function Child(name, age) {
    Parent.call(this, name);
    this.age = age;
}
Child.prototype = new Parent();

var test = new Child("Andy", 12);
console.log(test.run());

test.arr.push("Jack");
console.log(test.arr);
console.log(test.run());//Andy,只共享了方法

var test2 = new Child("Bill", 21);
console.log(test2.arr);//引用問題解決

云服務器 GPU云服務器 javascript繼承 javascript繼承方法 Javascript實現繼承 javascript類的繼承

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

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

徹底搞懂JavaScript中的繼承

摘要：這正是我們想要的太棒了毫不意外的，這種繼承的方式被稱為構造函數繼承，在中是一種關鍵的實現的繼承方法，相信你已經很好的掌握了。你應該知道，JavaScript是一門基于原型鏈的語言，而我們今天的主題 -- 繼承就和原型鏈這一概念息息相關。甚至可以說，所謂的原型鏈就是一條繼承鏈。有些困惑了嗎？接著看下去吧。一、構造函數，原型屬性與實例對象要搞清楚如何在JavaScript中實現繼承，...

_ivan 2019-08-21 17:48 評論0 收藏0
講清楚之 javascript 對象繼承

摘要：中的繼承并不是明確規定的，而是通過模仿實現的。繼承中的繼承又稱模擬類繼承。將函數抽離到全局對象中，函數內部直接通過作用域鏈查找函數。這種范式編程是基于作用域鏈，與前面講的繼承是基于原型鏈的本質區別是屬性查找方式的不同。這一節梳理對象的繼承。我們主要使用繼承來實現代碼的抽象和代碼的復用，在應用層實現功能的封裝。 javascript 的對象繼承方式真的是百花齊放，屬性繼承、原型繼承、...

Jonathan Shieber 2019-08-26 11:58 評論0 收藏0
javascript繼承 --- 多種繼承方式解析(ES5)

摘要：繼承前言作為一門輕量級的腳本語言在和的橫空出世之后將其推向的新的高度雖然中出現的新的生成對象的類語法格式但依然為的語法糖而我們依然有必要從的原生實現入手來了解它的繼承實現方式給出了更加簡潔的固定的類聲明方式有興趣的可以查看阮一峰的入門下面給 javascript繼承前言 javascript作為一門輕量級的腳本語言在ES6和node.js的橫空出世之后將其推向的新的高度,雖然 ES6...

yankeys 2019-08-26 11:35 評論0 收藏0
白話解釋 Javascript 原型繼承(prototype inheritance)

摘要：我們有了構造函數之后，第二步開始使用它構造一個函數。來個例子這種方式很簡單也很直接，你在構造函數的原型上定義方法，那么用該構造函數實例化出來的對象都可以通過原型繼承鏈訪問到定義在構造函數原型上的方法。來源: 個人博客白話解釋 Javascript 原型繼承(prototype inheritance) 什么是繼承? 學過面向對象的同學們是否還記得，老師整天掛在嘴邊的面向對象三大特...

kid143 2019-08-21 15:09 評論0 收藏0
javascript的繼承你了解多少？

摘要：和構造函數前面提到，是個內置隱藏屬性，雖然在可以通過訪問，但是其設計本意是不可被讀取和修改的，那么我們如何利用原型鏈來建立繼承關系提供了關鍵字。到這兒，思路就清晰了，怎么讓對象和對象的相連實現繼承只需把的構造函數的連接到就行了。什么是繼承? 大多數人使用繼承不外乎是為了獲得這兩點好處，代碼的抽象和代碼的復用。代碼的抽象就不用說了，交通工具和汽車這類的例子數不勝數，在傳統的OO語言中(...

baishancloud 2019-08-23 14:08 評論0 收藏0