JavaScript繼承

JinB 發(fā)布于2019-08-21 15:33 / 1220人閱讀

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

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);//得到被繼承的屬性

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

2、借用構(gòu)造函數(shù)（類式繼承）

function Parent(age) {
    this.name = ["Mike", "Bill", "Andy"];
    this.age = age;
}
function Child(age) {
    Parent.call(this, age);//把this指向Parent,同時還可以傳遞參數(shù)
}
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);//創(chuàng)建對象
    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實現(xiàn)繼承 javascript類的繼承

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/88225.html

徹底搞懂JavaScript中的繼承

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

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

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

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

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

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

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

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

摘要：和構(gòu)造函數(shù)前面提到，是個內(nèi)置隱藏屬性，雖然在可以通過訪問，但是其設計本意是不可被讀取和修改的，那么我們?nèi)绾卫迷玩渷斫⒗^承關系提供了關鍵字。到這兒，思路就清晰了，怎么讓對象和對象的相連實現(xiàn)繼承只需把的構(gòu)造函數(shù)的連接到就行了。什么是繼承? 大多數(shù)人使用繼承不外乎是為了獲得這兩點好處，代碼的抽象和代碼的復用。代碼的抽象就不用說了，交通工具和汽車這類的例子數(shù)不勝數(shù)，在傳統(tǒng)的OO語言中(...

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