JavaScript继承

JinB 发布于2019-08-21 15:33 / 1272人阅读

摘要：原型链继承继承，通过原型，形成链条得到被继承的属性继续原型链继承构造继续原型链继承借用构造函数类式继承把指向同时还可以传递参数组合继承对象冒充，给超类型传参原型链继承写也行原型式继承寄生组合式继承创建对象增强对象只共享了方法引用问题解决

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类的继承

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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