JavaScript学习第十天笔记（继承）

baiy 发布于2019-08-26 12:17 / 2859人阅读

摘要：继承原型链如果构造函数或对象的原型指向构造函数或对象，的原型再指向构造函数或对象，以此类推，最终的构造函数或对象的原型指向的原型。

继承 原型链

如果构造函数或对象A的原型指向构造函数或对象B，B的原型再指向构造函数或对象C，以此类推，最终的构造函数或对象的原型指向Object的原型。由此形成了一条链状结构，被称之为原型链。按照上述的描述，在B中定义的属性或方法，可以在A中使用并不需要定义。这就是继承，它允许每个对象来访问其原型链上的任何属性或方法。在JS语言中，原型链是继承的默认产生方式。

//原型链
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.a);//a
console .log(b.b);//b

function C(){
    this.c = "c"
}
//将C的原型指向B
C.prototype = b;
var c= new C();
/*console .log(对象.属性)*/
console .log(c.c);//c
console .log(c.b);//b
console .log(c.a);//a

只继承与原型

出于对效率的考虑，尽可能地将属性和方法加到原型上，可以采用以下方式：
1.不要为继承关系多带带创建新对象。
2.尽量减少运行时的方法搜索。

//原型链
function A(){

}
A.prototype.a="a";//将自有属性改写为原型属性

function B(){

}
B.prototype=A.prototype; //将B的原型属性指向A的原型属性
B.prototype.b = "b";


function C(){
    this .c="c";
}
C.prototype = B.prototype;

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

原型链的问题

原型链虽然强大，用它可以实现JS中的继承，但同时也存在一些问题。
1.原型链实际上是在多个构造函数或对象之间共享属性和方法。
2.创建子类的对象时，不能向父级的构造函数传递任何参数。
所以，在实际开发中，很少会多带带使用原型链。

原型式继承

所谓原型式继承，就是定义一个函数，该函数中创建一个历史性的构造函数，将作为参数传入的对象作为这个构造函数的原型，最后返回这个构造函数的实现对象。

/*
    定义一个函数 - 用于实现对象之间的继承
    * 参数
      * obj - 表示继承关系中的父级对象
      * prop - 对象格式，表示继承关系中的子级对象的属性和方法
  */
function fn(obj, porp){
    // 定义一个临时的构造函数
    function Fun(){
        // 遍历对象的属性和方法
        for (var attrName in porp) {
            // var attrValue = porp[attrName];
            this[attrName] = porp[attrName];
        }
    }
    // 将函数的参数作为构造函数的原型
    Fun.prototype = obj;
    // 将构造函数创建的对象进行返回
    return new Fun();
}
var obj = {
    name : "HK"
}
// 调用函数
var result = fn(obj, {
    age : 26,
    sayMe : function(){
        console.log("this is function");
    }
});
console.log(result.age);
result.sayMe();

Object.create()方法实现继承

var obj = {
    name : "HK"
}
var newObj = Object.create(obj, {
    age : {
        value : 26
    },
    sayMe : {
        value : function(){
            console.log("this is function");
        }
    }
});
console.log(newObj.age);
newObj.sayMe();

借助构造函数

在子级中调用父级元素的属性

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

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

    this.child = "child";
}
// 创建子级对象
var child = new Child();
console.log(child);

服务器托管私有云第十天 javascript学习笔记 javascript继承 javascript继承方法

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

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

26天学通前端开发（配资料）

摘要：网上有很多前端的学习路径文章，大多是知识点罗列为主或是资料的汇总，数据量让新人望而却步。天了解一个前端框架。也可以关注微信公众号晓舟报告，发送获取资料，就能收到下载密码，网盘地址在最下方，获取教程和案例的资料。前言好的学习方法可以事半功倍，好的学习路径可以指明前进方向。这篇文章不仅要写学习路径，还要写学习方法，还要发资料，干货满满，准备接招。网上有很多前端的学习路径文章，大多是知...

blair 2019-08-21 16:59 评论0 收藏0
JS学习第十天笔记 Array类型

摘要：只有满足才返回，否则返回。专门用于筛选出数组中符合函数判断条件的元素组成的心数组。专门用于对原数组中每个元素执行相同的函数对象规定的操作。并归方法将数组从左向右迭代。 Array类型数组的常见方法检测数组如何确定当前是一个数组，JS提供了以下几种方式1.typeof无法检测数组对象：typrof[]返回object2.instanceof：[]instanceof Array返回...

Barrior 2019-08-26 12:17 评论0 收藏0
[学习笔记] css中的line-height

摘要：基本概念行高行距行高是指文本行基线间的垂直距离。行框行框是指本行的一个虚拟的矩形框，由该行中行内框组成。行框也是浏览器渲染模式中的一个概念，无法显示出来。行框高度等于本行中所有行内框高度的最大值。设置合理的行间距。设置固定的行间距。又已经快十天没有写文章了，一周一篇其实好艰难的说……本来想接着上篇事件（上篇）总结事件类型的，可是看完之后整理下还是有点乱，就一直拖着没写……实在是不能再...

frolc 2019-08-28 18:13 评论0 收藏0
慕课网《十天精通CSS3》笔记——《制作导航菜单综合练习题》

摘要：制作立体导航制作圆制作导航立体风格使用伪元素制作导航列表项分隔线删除第一项和最后一项导航分隔线以下是一个带有hover特效的导航栏HTML+CSS源码。 CSS制作立体导航 body{ background: #ebebeb; } .nav{ widt...

fantix 2019-08-02 18:09 评论0 收藏0
第十天-《企业应用架构模式》-数据源架构模式

摘要：运行机制表数据入口包含了用于访问单个表或试图的所有，如选择插入更新删除等。其他代码调用它的方法来实现所有与数据库的交互。示例如下图分别是普通情况下充分利用特征下的表数据入口实现行数据入口充当数据源中单条记录入口的对象，每行一个实例。 1. 表数据入口　　充当数据库表访问入口的对象，一个实例处理表中所有的行。 1）运行机制：　　　　表数据入口包含了用于访问单个表或试图的所有SQL，如...

Drummor 2019-07-01 11:18 评论0 收藏0