JavaScript 继承

最新推荐文章于 2024-04-30 19:20:28 发布

ximengyun

最新推荐文章于 2024-04-30 19:20:28 发布

阅读量662

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： JavaScript 继承 prototype 浅拷贝深拷贝

本文链接：https://blog.youkuaiyun.com/cookfront/article/details/9133485

JavaScript 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了JavaScript中五种实现继承的方法：构造函数绑定、prototype模式、直接继承prototype、利用空对象作为中介及拷贝继承，并提供了非构造函数的三种继承方式，包括object()方法、浅拷贝与深拷贝。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、构造函数的继承：

1、构造函数绑定：使用call或者apply，将父对象的构造函数绑定在子对象上：

function Animal () {
    this.type = "";
}
funtion Dog (name, color) {
    Animal.apply(this, arguments);
    this.name = name;
    this.color = color;
}

2、prototype模式：

function Animal () {
    this.type = "";
}
funtion Dog (name, color) {
    this.name = name;
    this.color = color;
}
Dog.prototype = new Animal();
Dog.prototype.constructor = Dog;

3、直接继承prototype：此种方法效率高，更节省内存，但有一个缺点：Dog.prototype和Animal.ptototype指向同一个对象，所以对Dog.prototype的任何修改都会反应到Animal.ptototype。

function Animal () {
    this.type = "";
}
funtion Dog (name, color) {
    this.name = name;
    this.color = color;
}
Dog.prototype = Animal.prototype;

4、利用空对象作为中介：

function Animal () {
    this.type = "";
}
funtion Dog (name, color) {
    this.name = name;
    this.color = color;
}
var F = function () {};
F.prototype = Animal.prototype;
Dog.prototype = new F();
Dog.prototype.constructor = Dog;

5、拷贝继承：

function Animal () {
    this.type = "";
}
funtion Dog (name, color) {
    this.name = name;
    this.color = color;
}
function extend (child, parent) {
    var p = parent.prototype,
        c = child.prototype;
    for (var i in p) {
        c[i] = p[i];
    }
    c.uber = p;
}
extend(Dog, Animal);

extend()函数的作用是将父对象的prototype的属性一一拷贝给child对象的prototype。

二、非构造函数的继承：

1.object()方法：

var Animal = {
    type: ""
}
function object (o) {
    function F () {};
    F.prototype = o;
    return new F();
}
var Dog = object(Animal);
Dog.name = "someOne";

2.浅拷贝：

var Animal = {
    type: "animal"
}
function extend(p) {
    var c = {};
    for (var i in p) {
        c[i] = p[i];
    }
    c.uber = p;
    return c;
}
var Dog = extend(Animal);
Dog.name = "someOne";
alert(Dog.type);

但是当父对象的属性为一个数组或对象时，那么子对象获得的只是一个内存地址，而不是真正的拷贝，因此存在父对象被改动的可能。

var Animal = {
    type: "animal",
    name: ["test1", "test2", "test3"]
}
function extend(p) {
    var c = {};
    for (var i in p) {
        c[i] = p[i];
    }
    c.uber = p;
    return c;
}
var Dog = extend(Animal);
Dog.name.push("test4");
alert(Dog.name);
alert(Animal.name);

3.深拷贝：

var Animal = {
    type: "animal",
    name: ["test1", "test2", "test3"]
}
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];
        }
    }
    c.uber = p;
    return c;
}
var Dog = deepCopy(Animal);
Dog.name.push("test4");
alert(Dog.name);
alert(Animal.name);