理解JS非构造函数继承

Cristic 发布于2019-08-19 18:04 / 2454人阅读

摘要：即对象为非构造函数，普通函数继承另一个普通函数。方法浅拷贝深拷贝推荐方法发明人，提出的函数。该函数就是把子对象的属性，指向父对象。

即对象为非构造函数，普通函数继承另一个普通函数。

object()方法

浅拷贝

深拷贝（推荐）

object()方法

json发明人Douglas Crockford，提出的object()函数。

function object(o) {
    function F() {}
    F.prototype = o;
    return new F();
}

该函数就是把子对象的prototype属性，指向父对象。使用时依然是先继承后定义子对象的方法和属性

var parent = {
    name: "Oliver"
};
var child = object(parent); //先继承
child.age = 18; //后定义
console.log(child.name); //Oliver
console.log(child.age); //18

浅拷贝

function extend(p) {
    var c = {};
    for(var i in p){
        c[i] = p[i];
    }
    c.uber = p;
    return c;
}

该方法只能继承基本数据类型，如果父对象有数组等对象，拷贝的只是个地址，子对象属性的改变会导致父对象属性的改变（篡改问题）

var parent = {
    name: "Oliver",
    friend: [1,2,3]
};

var child = extend(parent); //先继承
child.age = 18;

console.log(child.name); //Oliver
console.log(child.age); //18
child.friend.pop();
console.log(child.friend); //两者都改变了
console.log(parent.friend); //两者都改变了

深拷贝

function deepCopy(p, c) {　　　　
    var c = c || {};　　　　
    for (var i in p) {　　　　　　
        if (typeof p[i] === "object") {　　　　　　　　
            c[i] = (p[i].constructor === Array) ? [] : {};　　　　　　　　
            deepCopy(p[i], c[i]);　　　　　　
        } else {　　　　　　　　　
            c[i] = p[i];　　　　　　
        }　　　　
    }　　　　
    return c;　　
}

该方法原理是递归调用"浅拷贝"

var parent = {
    name: "Oliver",
    friend: [1, 2, 3]
};

var child = deepCopy(parent); //先继承
child.age = 18;

console.log(child.name); //Oliver
console.log(child.age); //18
child.friend.pop();
console.log(child.friend); //[1, 2]
console.log(parent.friend); //[1, 2, 3]

海外云主机服务器托管继承构造函数构造函数继承非构造函数 JS构造函数

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

转载请注明本文地址：https://www.ucloud.cn/yun/79164.html

面向对象的 JavaScript

摘要：是完全的面向对象语言，它们通过类的形式组织函数和变量，使之不能脱离对象存在。而在基于原型的面向对象方式中，对象则是依靠构造器利用原型构造出来的。 JavaScript 函数式脚本语言特性以及其看似随意的编写风格，导致长期以来人们对这一门语言的误解，即认为 JavaScript 不是一门面向对象的语言，或者只是部分具备一些面向对象的特征。本文将回归面向对象本意，从对语言感悟的角度阐述为什...

novo 2019-08-21 10:49 评论0 收藏0
独家解析Javascript原型继承

摘要：面向对象实现代码动物发声汪汪喵喵调用代码动物发声喵喵动物发声汪汪当要增加一种动物时，只需增加一个继承，不会影响其他已有的动物逻辑。所以的继承和的原型继承，可谓殊途同归。传统面向对象的继承和多态我们知道C++／Java／C#等面向对象语言，都原生地支持类的继承。继承的核心作用大抵是创建一个派生类，并使其复用基本类（即父类）的字段和／或方法。并且派生类可以重写基本类的方法。这样基本类和...

verano 2019-08-20 18:01 评论0 收藏0
JS对象继承与原型链

摘要：此用来定义通过构造器构造出来的对象的原型，构造器内部的代码用来给对象初始化。对象继承 VS 类继承在 class-based 的面向对象的世界里，要出现对象，必须先有类。类之间可以继承，类再使用 new 操作创建出实体，父子对象之间的继承体现在父类和子类上。你不能说对象 a 继承了对象 b，只能说 class A 继承了 class B，然后他们各自有一个实例a、b。 JS中实现...

QLQ 2019-08-22 11:08 评论0 收藏0
JavaScript之深入各种继承

摘要：通常有这两种继承方式接口继承和实现继承。理解继承的工作是通过调用函数实现的，所以是寄生，将继承工作寄托给别人做，自己只是做增强工作。适用基于某个对象或某些信息来创建对象，而不考虑自定义类型和构造函数。一、继承的概念继承，是面向对象语言的一个重要概念。通常有这两种继承方式：接口继承和实现继承。接口继承只继承方法签名，而实现继承则继承实际的方法。《JS高程》里提到：由于函数没有签名，...

tomlingtm 2019-08-23 17:08 评论0 收藏0
JS中继承方式总结

摘要：三组合继承结合原型链方式和借用构造函数方式的有点，进行改进的一种继承方式。四寄生组合式继承为了解决组合继承中子构造函数的原型链出现冗余的属性和方法，引入的一种继承方式。说在前面：为了使代码更为简洁方便理解，本文中的代码均将非核心实现部分的代码移出。一、原型链方式关于原型链，可点击《深入浅出，JS原型链的工作原理》，本文不再重复叙述。思路：让子构造函数的原型等于父构造函数的实例...

rottengeek 2019-08-26 13:27 评论0 收藏0