JavaScript面向对象中的继承个人分享

Coly 发布于2019-08-26 12:14 / 2350人阅读

摘要：继承原型链所谓言行链就是如果构造函数或对象的原型指向构造函数或对象的原型再指向构造函数或对象以此类推最终的构造函数或对象的原乡指向的原型由此形成一条链状结构被称之为原型链示例代码原型链通过构造函数创建对象将的原型指向对象通过构造函数创建对象

继承 原型链

所谓言行链就是如果构造函数或对象A,A的原型指向构造函数或对象B,B的原型再指向构造函数或对象C,以此类推,最终的构造函数或对象的原乡指向Object的原型.由此形成一条链状结构,被称之为原型链

示例代码:

// 原型链
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的原型指向
B.prototype = A.prototype;

B.prototype.b = "b";
/*B.prototype = {
    b : "b"
}*/

function C(){
    this.c = "c";
}
// 将C的原型指向
C.prototype = B.prototype;

var c = new C();
console.log(c.c);// c
console.log(c.b);
console.log(c.a);// a

原型链实现继承的问题

原型链实际上是在多个构造函数或对象之间共享属性和方法

常见子类的对象时,不能像父级的构造函数传递任何参数

注意: 在实际开发中很少会多带带使用原型链

示例代码:

// 原型链
function A(){
    // 将自有属性改写为原型属性
    // this.a = "a";
}
A.prototype.a = "a";

function B(){
    // this.b = "b";
}

// 将B的原型指向
B.prototype = A.prototype;

B.prototype.b = "b";

function C(){
    // this.c = "c";
}
// 将C的原型指向
C.prototype = B.prototype;
C.prototype.c = "c";

var c = new C();
console.log(c.c);// 调用结果为 c
console.log(c.b);// 调用结果为 b
console.log(c.a);// 调用结果为 a

var a = new A();

console.log(a.a);// 调用结果为 a
console.log(a.b);// 调用结果为 b
console.log(a.c);// 调用结果为 c

var b = new B();

console.log(b.a);// 调用结果为 a
console.log(b.b);// 调用结果为 b
console.log(b.c);// 调用结果为 c

原型式继承

语法 : 定义一个函数 - 再将构造函数创建的对象返回,用于实现对象之间的继承

参数

obj - 表示继承关系中的父级对象

prop - 对象格式,表示继承关系中的子级对象的属性和方法

示例代码:

function fn(obj,prop) {
    // 定义一个临时的构造函数
    function Fun() {
        // 遍历对象的属性和方法
        for(var attrName in prop){
            this[attrName] = prop[attrName];
        }
    }
    // 将函数的参数作为构造函数的原型
    Fun.prototype = obj;
    // 将构造函数创建的对象进行返回
    return new Fun();
}
var obj = {
    name : "皮卡丘"
};
// 调用函数
var result = fn(obj,{
    age : 26,
    sayMe : function () {
        console.log("一花一世界");
    }
});
console.log(result.age);// 调用结果为 26
result.sayMe();// 调用结果为 一花一世界

原型式竭诚另一种方法

示例代码:

 // 利用Object.create()
 var obj ={
    name : "皮卡丘"
 };
var newObj = Object.create(obj,{
    age : {
        value : 18
    },
    sayMe : {
        value : function () {
            console.log("一花一世界");
        }
    }
});
console.log(newObj.age);// 调用结果为 18
newObj.sayMe();// 调用结果为 一花一世界

借助构造函数

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

示例代码:

// 定义父级对象的构造函数
function Parent() {
    this.parent = "嘎嘎嘎";
}

// 定义子级对象的构造函数
function Child() {
    // 调用父级对象的构造函数 - 使用apply()或call()方法
    Parent.call(this);
    this.child = "嚯嚯嚯";
}

// 创建子级对象
var child = new Child();
console.log(child);// 调用结果为 Child { parent: "嘎嘎嘎", child: "嚯嚯嚯" }

分析图:

组合式继承

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

示例代码:

function Parent(){
    // 构造函数的自有属性
    this.name = "猪八戒";
}
// 构造函数的原型属性
Parent.prototype.age = 500 + "岁";

function Child(){
    // 继承父级构造函数中的自有属性
    Parent.call(this);

    this.job = "净坛使者";
}
// 继承父级构造函数中的原型属性
Child.prototype = Parent.prototype;

var child = new Child();

console.log(child.job);// 调用结果为 净坛使者
console.log(child.age);// 调用结果为 500岁
console.log(child.name);// 调用结果为 猪八戒

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

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

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

JavaScript中的面向对象个人分享

摘要：面向对象面向对象的概念所谓面向对象就用抽象方式创建基于显示世界模型的一种变成模式面向对象编程可以看做是使用一系列对象互相协作的软件设计备注面向对象全称简称面向对象编程的主要三个特征是封装所谓封装就是按要求使用得到对象的结果相关数据用于存储面向对象面向对象的概念所谓面向对象就用抽象方式创建基于显示世界模型的一种变成模式,面向对象编程可以看做是使用一系列对象互相协作的软件设计备注...

DirtyMind 2019-08-26 12:11 评论0 收藏0
【重温基础】15.JS对象介绍

摘要：构造函数通常首字母大写，用于区分普通函数。这种关系常被称为原型链，它解释了为何一个对象会拥有定义在其他对象中的属性和方法。中所有的对象，都有一个属性，指向实例对象的构造函数原型由于是个非标准属性，因此只有和两个浏览器支持，标准方法是。从这篇文章开始，复习 MDN 中级教程的内容了，在初级教程中，我和大家分享了一些比较简单基础的知识点，并放在我的【Cute-JavaScript】系...

booster 2019-08-23 14:43 评论0 收藏0
JS对象(1)重新认识面向对象

摘要：对象重新认识面向对象面向对象从设计模式上看，对象是计算机抽象现实世界的一种方式。除了字面式声明方式之外，允许通过构造器创建对象。每个构造器实际上是一个函数对象该函数对象含有一个属性用于实现基于原型的继承和共享属性。 title: JS对象(1)重新认识面向对象 date: 2016-10-05 tags: JavaScript 0x00 面向对象从设计模式上看，对象是...

superw 2019-08-21 11:17 评论0 收藏0
JavaScript面向对象中的原型个人分享

摘要：原型原型是什么所谓原型就是类型对象的一个属性在函数定义时就包含了属性它的初始值是以个空对象在中并没有定义函数的原型类型所以原型可以是任何类型原型是用于保存对象的共享属性和方法的原型的属性和方法并不会影响函数本身的属性和方法示例代码类型的属性原型原型是什么所谓原型(Prototype)就是Function类型对象的一个属性在函数定义时就包含了prototype属性,它的初始值是...

pakolagij 2019-08-26 12:14 评论0 收藏0
再谈JavaScript面向对象思想及继承

摘要：面向对象中有三大特征，封装，继承，多态。这不仅无法做到数据共享，也是极大的资源浪费，那么引入对象实例对象的属性指向其构造函数，这样看起来实例对象好像继承了对象一样。实例对象的原型指向其构造函数的对象构造器的指向。前言为什么说是再谈呢，网上讲解这个的博客的很多，我开始学习也是看过，敲过就没了，自以为理解了就结束了，书到用时方恨少啊。实际开发中一用就打磕巴，于是在重新学习了之后分享出来...

svtter 2019-08-21 17:19 评论0 收藏0