• 继承和原型链


    继承方面,JavaScript 中的每个对象都有一个内部私有的链接指向另一个对象,这个对象就是原对象的原型。这个原型对象也有自己的原型,直到对象的原型为 null 为止(也就是没有原型)。这种一级一级的链结构就称为原型链

    虽然这通常会被称作 JavaScript 的弱点之一,实际上这种原型继承的模型要比经典的继承模型还要强大。虽然在原型模型上构建一个经典模型是相当琐碎的,但如果采取其他方式实现则会更加困难。

    基于原型链的继承

    继承属性

    JavaScript 对象有两种不同的属性,一种是对象自身的属性,另外一种是继承于原型链上的属性。下面的代码则演示了当访问一个对象的属性时发生的行为:

    // 假定我们有个对象o,并且o所在的原型链如下:
    // {a:1, b:2} ---> {b:3, c:4} ---> null
    // 'a'和'b'是o自身的属性.
    
    // 该例中,用"对象.[[Prototype]]"来表示这个对象的原型.
    // 这只是一个纯粹的符号表示(ECMAScript标准中也这样使用),不能在实际代码中使用.
    
    console.log(o.a); // 1
    // a是o的自身属性吗?是的,该属性的值为1
    
    console.log(o.b); // 2
    // b是o的自身属性吗?是的,该属性的值为2
    // o.[[Prototype]]上还有一个'b'属性,但是它不会被访问到.这种情况称为"属性遮蔽".
    
    console.log(o.c); // 4
    // c是o的自身属性吗?不是,那看看o.[[Prototype]]上有没有.
    // c是o.[[Prototype]]的自身属性吗?是的,该属性的值为4
    console.log(o.d); // undefined
    // d是o的自身属性吗?不是,那看看o.[[Prototype]]上有没有.
    // d是o.[[Prototype]]的自身属性吗?不是,那看看o.[[Prototype]].[[Prototype]]上有没有.
    // o.[[Prototype]].[[Prototype]]为null,原型链已到顶端,没有d属性,返回undefined
    

    继承方法

    JavaScript 并没有真正的“方法”,JavaScript 只有函数,而且任何函数都可以添加到对象上作为对象的属性。继承的函数与其他的属性是基本没有差别的,包括“属性遮蔽”(这种情况相当于其他语言的方法重写)。

    当继承的函数被调用时,this 指向的是当前继承原型的对象,而不是继承的函数所在的原型对象。

    var o = {
      a: 2,
      m: function(){
        return this.a + 1;
      }
    };
    
    console.log(o.m()); // 3
    // 当调用 o.m 时,'this'指向了o.
    
    var p = Object.create(o);
    // p是一个对象, p.[[Prototype]]是o.
    
    p.a = 12; // 创建p的自身属性a.
    console.log(p.m()); // 13
    // 调用p.m时, 'this'指向 p. 'this.a'则是12.1
    

    使用不同的方法来创建对象和生成原型链

    使用普通语法创建对象

    var o = {a: 1};
    
    // o这个对象继承了Object.prototype上面的所有属性
    // 所以可以这样使用 o.hasOwnProperty('a').
    // hasOwnProperty 是Object.prototype的自身属性。
    // Object.prototype的原型为null。
    // 原型链如下:
    // o ---> Object.prototype ---> null
    
    var a = ["yo", "whadup", "?"];
    
    // 数组都继承于Array.prototype (indexOf, forEach等方法都是从它继承而来).
    // 原型链如下:
    // a ---> Array.prototype ---> Object.prototype ---> null
    
    function f(){
      return 2;
    }
    
    // 函数都继承于Function.prototype(call, bind等方法都是从它继承而来):
    // f ---> Function.prototype ---> Object.prototype ---> null
    
  • 相关阅读:
    ASP.NET Core Identity 实战(3)认证过程
    ASP.NET Core Identity 实战(2)——注册、登录、Claim
    C#代码风格指南
    看eShopOnContainers学一个EventBus
    105.电脑中共享盘保存密码之后,删掉默认保存密码的操作方法
    005.abap中宏的使用
    002.64位系统的SAP学习机
    在react/redux中使用Immutable
    ajax与HTML5 history API实现无刷新跳转
    阿里前端实习生面试总结(两轮技术面+一轮hr面)
  • 原文地址:https://www.cnblogs.com/wupeng88/p/4762675.html
Copyright © 2020-2023  润新知