JavaScript 之面向对象 [ 继承 ]

dockerclub 发布于2019-08-26 12:15 / 1960人阅读

摘要：继承描述在一个构造函数或对象中定义的属性或方法，可以在另一个构造函数或对象中直接使用，而不需要在去重新定义原型链一个构造函数或对象的原型指向另一个构造函数或对象，以此类推形成一条链状结构，这种效果被称为原型链这种原型链也可以称为继承定义第一

继承描述

在一个构造函数或对象中定义的属性或方法，可以在另一个构造函数或对象中直接使用，而不需要在去重新定义

原型链

一个构造函数或对象的原型指向另一个构造函数或对象，以此类推形成一条链状结构，这种效果被称为原型链

这种原型链也可以称为继承

/* 定义第一个构造函数 */
function A(){
    this.a = "a";
}
/* 创建对象 */
var a = new A();

/* 定义第二个构造函数 */
function B(){
    this.b = "b";
}
/* 将B的原型指向对象a */
B.prototype = a;
/* 创建对象 */
var b = new B();

console.log( b.b );// 显示 b
console.log( b.a );// 显示 a

/* 定义第三个构造函数 */
function C(){
    this.c = "c";
}
/* 将C的原型指向对象b */
C.prototype = b;
/* 创建对象 */
var c = new C();

console.log( c.c );// 显示 c
console.log( c.b );// 显示 b
console.log( c.a );// 显示 a

只继承于原型

一个构造函数的原型指向另一个构造函数的原型

可以理解为原型链的一种优化（个人理解）

/* 定义第一个构造函数 */
function A(){
    // 将自有属性改写为原型属性
    // this.a = "a";
}
A.prototype.a = "a";

/* 定义第二个构造函数 */
function B(){
    // this.b = "b";
}

/* 将B的原型指向A的原型 */
B.prototype = A.prototype;
/*
    将B的自有属性改写成原型属性
     * 要先去执行原型的指向
     * 在去改写属性
     * 如果代码的执行顺序反过来会变成对属性的重新赋值
 */
B.prototype.b = "b";

/* 定义第三个构造函数 */
function C(){
    this.c = "c";
}
/* 将C的原型指向B的原型 */
C.prototype = B.prototype;
/* 创建对象 */
var c = new C();
console.log(c.c);// 显示 c
console.log(c.b);// 显示 b
console.log(c.a);// 显示 a

原型式继承

定义一个函数，在该函数中创建一个构造函数，再将构造函数创建的对象返回，用于实现继承

/* 定义一个函数 */
function fun( obj, values ) {
    /* 定义一个构造函数 */
    function Fn() {
        /* 遍历构造函数的属性和方法 */
        for ( var key in values ) {
            this[key] = values[key];
        }
    }
    /* 将函数的参数当做构造函数的原型 */
    Fn.prototype = obj;
    /* 将构造函数创建的对象做为函数的返回值 */
    return new Fn();
}
/* 定义一个对象 */
var obj = {
    name : "唐三"
}
/* 调用函数 - 将构造函数的自有属性或方法以参数传入 */
var f = fun( obj, {
    nian : 20,
    menpai : function () {
        console.log( "唐门" );
    }
} );
/* 调用属性和方法 */
console.log( f.name );// 显示 唐三
console.log( f.nian );// 显示 20
f.menpai();// 显示 唐门

Object.create()方法

使用Object.create()方法也可以实现继承

/* 定义一个对象 */
var obj1 = {
    name : "融念冰"
}
var s = Object.create( obj1, {
    /* 定义属性或方法时，值需要以对象的形式表示 */
    nian : {
        value : 20
    }
} );
/* 调用属性 */
console.log( s.name );// 显示 融念冰
console.log( s.nian );// 显示 20

借助构造函数

可用过在子级的构造函数中调用父级的构造函数，来实现继承效果

/* 定义父级构造函数 */
function Fun() {
    /* 这里的this指向调用的参数 */
    this.fuji = "哈哈哈";
}

/* 定义子级构造函数 */
function Fn() {
    /* 在子级构造函数中调用父级构造函数中的属性 */
    Fun.apply( this );// 这里的this指向当前构造函数的对象（构造函数Fn）
    /* 这里的this表示当前调用属性的对象 */
    this.ziji = "呀呀呀";
}
/* 创建子级对象 */
var ziji = new Fn();
console.log( ziji );// 显示 Fn { fuji: "哈哈哈", ziji: "呀呀呀" }

组合式继承

将原型式继承和借助构造函数式继承有效的结合在一起

分开继承自有属性和原型属性

/* 定义父级构造函数 */
function Fun() {
    /* 这里的this指向调用的参数 */
    this.name = "唐三";
}
/* 添加原型属性 */
Fun.prototype.nian = 20;

/* 定义子级构造函数 */
function Fn() {
    /* 在子级构造函数中调用父级构造函数中的属性 - 继承父级的自有属性 */
    Fun.apply( this );// 这里的this指向当前构造函数的对象（构造函数Fn）
    /* 这里的this表示当前调用属性的对象 */
    this.menpai = "唐门";
}
/* 继承父级的原型属性 */
Fn.prototype = Fun.prototype;

/* 创建子级对象 */
var ziji = new Fn();
/* 调用属性 */
console.log( ziji.name );// 显示 唐三
console.log( ziji.nian );// 显示 20
console.log( ziji.menpai );// 显示 唐门

GPU云服务器云服务器 javascript 面向对象 javascript面向对象 javascript面向对象编程 javascript面向对象编程指南

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

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

javascript面向对象之“多态”

摘要：之前，本质上不能算是一门面向对象的编程语言，因为它对于封装继承多态这些面向对象语言的特点并没有在语言层面上提供原生的支持。所以在中出现了等关键字，解决了面向对象中出现了问题。 ES6之前，javascript本质上不能算是一门面向对象的编程语言，因为它对于封装、继承、多态这些面向对象语言的特点并没有在语言层面上提供原生的支持。但是，它引入了原型(prototype)的概念，可以让我们以...

JerryWangSAP 2019-08-23 14:11 评论0 收藏0
面向对象的JavaScript之继承(一) 类式继承

摘要：那你们肯定会问为什么共用，而没有共用呢，下面就给你解释，请看引用类型是共用的值类型是私用的。引言面向对象的编程语言都具继承这一机制,而 JavaScript 是基于原型(Prototype)面向对象程序设计,所以它的实现方式也是基于原型(Prototype)实现的. 继承的方式类式继承构造函数继承组合继承原型式继承寄生式继承寄生组合式继承 1.类式继承 //声明父...

forsigner 2019-08-20 14:21 评论0 收藏0
SegmentFault 技术周刊 Vol.32 - 七夕将至，你的“对象”还好吗？

摘要：很多情况下，通常一个人类，即创建了一个具体的对象。对象就是数据，对象本身不包含方法。类是相似对象的描述，称为类的定义，是该类对象的蓝图或原型。在中，对象通过对类的实体化形成的对象。一类的对象抽取出来。注意中，对象一定是通过类的实例化来的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 马上就要到七夕了，离年底老妈老爸...

李昌杰 2019-08-16 10:40 评论0 收藏0
SegmentFault 技术周刊 Vol.32 - 七夕将至，你的“对象”还好吗？

摘要：很多情况下，通常一个人类，即创建了一个具体的对象。对象就是数据，对象本身不包含方法。类是相似对象的描述，称为类的定义，是该类对象的蓝图或原型。在中，对象通过对类的实体化形成的对象。一类的对象抽取出来。注意中，对象一定是通过类的实例化来的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 马上就要到七夕了，离年底老妈老爸...

Lyux 2019-06-28 13:32 评论0 收藏0
SegmentFault 技术周刊 Vol.32 - 七夕将至，你的“对象”还好吗？

摘要：很多情况下，通常一个人类，即创建了一个具体的对象。对象就是数据，对象本身不包含方法。类是相似对象的描述，称为类的定义，是该类对象的蓝图或原型。在中，对象通过对类的实体化形成的对象。一类的对象抽取出来。注意中，对象一定是通过类的实例化来的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 马上就要到七夕了，离年底老妈老爸...

AaronYuan 2019-08-20 18:55 评论0 收藏0
【JavaScript】面向对象之继承

摘要：一继承原型式继承定义临时构造函数，作为参数传入对象作为着构造函数原型，并最后返回该构造函数的实例对象定义一个临时构造函数遍历对象属性和方法将函数参数作为函数的原型姜构造函数创造的对象进行返回犬夜叉借助构造函数无论是原型链还是原型式继承，都有 JS(JavaScript) 一.继承1.原型式继承定义临时构造函数，作为参数传入对象作为着构造函数原型，并最后返回该构造函数的实例对象 func...

sewerganger 2019-08-26 12:16 评论0 收藏0