• 技术文章 >web前端 >js教程

    JavaScript原型实现继承的方法介绍

    青灯夜游青灯夜游2020-11-19 18:10:30转载285

    在这篇文章中,我们将讨论原型以及如何在 JS 中使用它们进行继承。我们还将会看到原型方法与基于类的继承有何不同。

    继承

    继承是编程语言的一个显著特征,随着面向对象编程语言的引入而出现。这些语言大多是基于类的语言。在这里,类就像一个蓝图,对象是它的展现形式。就是说,要创建一个对象,首先我们必须创建一个类,然后我们可以从一个类创建任意数量的对象。

    想象一下,我们有一个表示智能手机的类。这个类具有像其他智能手机一样的可以拍照、有GPS定位等功能。下面是使用 c++ 来描述这样的一个类:

    class SmartPhone {
      public:
      void captureImages() {}
    }
    
    SmartPhone x;
    x.captureImages()

    我们创建了一个名为SmartPhone的类,它有一个名为capturePictures的方法用来拍照。

    如果我们需要一个iPhone类,它可以捕捉图像和一些特殊的功能,比如面部ID扫描。下面是两种可能的解决方案:

    这里是我们如何从SmartPhone类中继承capturePictures方法,使用 c++ 实现如下:

    class Iphone: public SmartPhone {
      public:
      void faceIDScan() {}
    }
    
    Iphone x
    
    x.faceIDScan()
    
    x.captureImages()

    上面是一个简单的继承示例。 但是,它表明继承可以使我们以某种方式重用代码,从而使所生成的程序更不易出错,并且花费更少的时间进行开发。

    以下是关于类的一些重要信息:

    值得注意的是,类本身并没有做任何事情。在从类创建对象之前,实际上没有完成任何工作。我们将看到它为什么不同于JavaScript。

    原型是什么?

    在 JS 中,所有对象都有一个特殊的内部属性,该属性基本上是对另一个对象的引用。 此引用取决于对象的创建方式。 在 ECMAScript/JavaScript规范中,它表示为[[Prototype]]

    由于[[Prototype]]链接到一个对象,所以该对象有自己的[[Prototype]]引用。这就是建立原型链的方式。

    这个[[Prototype]]链是 JS 中继承的构建块。

    __proto__ 对象

    为了访问对象的[[Prototype]],大多数浏览器都提供__proto__属性。访问方式如下:

    obj.__proto__

    需要注意的是,这个属性不是 ECMAScript 标准的一部分,它实际上是由浏览器实现的。

    获取和设置原型方法

    除了__proto__属性外,还有一种访问[[Prototype]]的标准方法:

    Object.getPrototypeOf(obj);

    对应的有个类似的方法来设置对象的[[Prototype]]

    Object.setPrototypeOf(obj, prototype);

    [[Prototype]].prototype属性

    [[Prototype]] 只不过是一种用来表示物体原型的标准符号。 许多开发人员将其与.prototype属性混淆,这是完全不同的事情,接着我们来研究一下.prototype属性。

    在 JS 中,有许多创建对象的方法。一种方法是使用构造函数,像这样使用new关键字来调用它:

    function SmartPhone(os) {
      this.os = os
    }
    
    let phone = new SmartPhone('Android')

    在控制台打印 phone 对象:

    {
      os: "IPhone"
      __proto__{
        constructor: ƒ SmartPhone(os)
       __proto__: Object
      }
    }

    现在,如果我们希望在phone对象上有一些方法,我们可以在函数上使用.prototype属性,如下所示:

    SmartPhone.prototype.isAndroid = function () {
      return this.os === 'Android' || 'android'
    }

    再次创建phone对象时,打印 phone 对象如下:

    {
      os: "Android"
      __proto__{
        isAndroid: ƒ()
        constructor: ƒ SmartPhone(os)
       __proto__: Object
      }
    }

    我们可以在对象的[[Prototype]]中看到isAndroid()方法。

    简而言之,.prototype属性基本上就像由给定的构造函数创建的[[Prototype]]对象的蓝图。 在.prototype属性/对象中声明的所有内容都会在对象的[[Prototype]]中弹出。

    实上,如果将 SmartPhone.prototype 与phone 的[[Prototype]]进行比较,就会发现它们是相同的:

    console.log(Object.getPrototypeOf(phone) === SmartPhone.prototype);
    // true

    值得注意的是,我们还可以在构造函数中创建方法:

    function ObjectA() {
      this.methodA = function () {}
    }
    
    let firstObj = new ObjectA()
    console.log(firstObj)

    这种方法的问题是当我们初始化一个新对象时。所有实例都有自己methodA的副本。相反,当我们在函数的原型上创建它时,对象的所有实例只共享方法的一个副本,显然使用原型的方式效率会过高。

    当我们访问属性时这里发生了什么?

    当我们访问一个属性以获取它时,会发生以下情况:

    JS 引擎查找对象上的属性,如果找到了该属性,然后返回它。否则,JS 引擎将通过查看[[Prototype]]来检查对象的继承属性,如果找到该属性,则返回它,否则,它会查找 [[Prototype]][[Prototype]]。 找到属性或没有[[Prototype]]时,该链结束,这意味着我们已经到达原型链的末端。

    当我们设置/创建属性时,JS 总是在对象本身上进行设置。 即使[[Prototype]]链上存在相同的属性,下面是一个例子:

    function MyObject() {}
    MyObject.prototype.propA = 10; // 在原型上创建属性
    
    let myObject = new MyObject();
    console.log(myObject.propA); // [[Prototype]]上的属性
    // 10
    
    myObject.propA = 20; // 对象的属性
    console.log(myObject.propA);
    // 20

    在上面的示例中,我们创建了一个构造函数,该函数的[[Prototype]]上具有属性propA。 当我们尝试对其进行读取操作时,会在控制台中看到该值。 但是,当我们尝试在对象本身上设置相同的属性时;JS 使用给定值在对象上创建一个新属性。 现在,如果我们不能直接访问[[Prototype]]上的属性。

    值得注意的是,普通对象的[[Prototype]]链的末尾是内置的Object.prototype。 这就是为什么大多数对象共享许多方法(例如toString())的原因。 因为它们实际上是在Object.prototype上定义的。

    使用原型继承的各种方法

    在 JS 中,无论我们如何创建对象,只有原型继承,但这些方式还有一些区别,来看看:

    对象字面量

    在JavaScript中创建对象的最简单方法是使用对象字面量:

    let obj = {}

    如果在浏览器的控制台中打印obj,我们将看到以下内容:

    1.png

    基本上,所有用文字面量创建的对象都继承了Object.prototype的属性。

    需要注意的是__proto__对象引用了创建它的构造函数。 在这种情况下,constructor属性指向Object构造函数。

    使用对象构造函数

    另一种不太常见的创建对象的方法是使用对象构造函数。JS 提供了一个名为Object的内置构造函数方法来创建对象。

    let obj = new Object();

    这种方法的结果与对象字面量的方式相同。它从Object.prototype继承属性。因为我们使用Object作为构造函数。

    Object.create 方法

    使用此辅助方法,我们可以创建一个带有[[Prototype]]的对象,如下所示:

    let SmartPhone = {
      captureImages: function() {}
    }
    
    let Iphone = Object.create(SmartPhone)
    
    Iphone.captureImages()

    这是在 JS 中使用继承的最简单方法之一。猜猜我们如何在没有任何[[Prototype]]引用的情况下创建对象?

    构造方法

    与 JS 运行时提供的对象构造函数相似。 我们还可以创建自己的构造函数,以创建适合我们需求的对象,如下所示:

    function SmartPhone(os) {
      this.os = os;
    }
    
    SmartPhone.prototype.isAndroid = function() {
      return this.os === 'Android';
    };
    
    SmartPhone.prototype.isIOS = function() {
      return this.os === 'iOS';
    };

    现在,我们想创建一个iPhone类,它应该有'iOS'作为它 os 属性的值。它还应该有faceIDScan方法。

    首先,我们必须创建一个Iphone构造函数,在其中,我们应该调用SmartPhone构造函数,如下所示:

    function Iphone() {
       SmartPhone.call(this, 'iOS');
    }

    这会将Iphone构造函数中的this.os属性设置为’iOS‘

    之所以调用SmartPhone.call方法,是因为我们需要更改 this 值以引用Iphone。 这类似于在面向对象的世界中调用父级的构造函数。

    接下来的事情是,我们必须从SmartPhone构造函数继承方法。 我们可以在此处使用Object.create朋友,如下所示:

    Iphone.prototype = Object.create(SmartPhone.prototype);

    现在,我们可以使用.prototypeIphone添加方法,如下所示:

    Iphone.prototype.faceIDScan = function() {};

    最后,我们可以使用Iphone创建一个对象,如下所示:

    let x = new Iphone();
    
    // calling inherited method
    console.log(x.isIOS()):
    // true

    ES6 class

    使用ES6,整个过程非常简单。 我们可以创建类(它们与C ++或其他任何基于类的语言中的类不同,只是在原型继承之上的语法糖),然后从其他类派生新的类。

    下面是我们如何在ES6中创建类:

    class SmartPhone {
      constructor(os) {
        this.os = os;
      }
      isAndroid() {
        return this.os === 'Android';
      }
      isIos() {
        return this.os === 'iOS';
      }
    };

    现在,我们可以创建一个派生自SmartPhone的新类,如下所示:

    class Iphone extends SmartPhone {
       constructor() {
         super.call('iOS');
       }
       faceIDScan() {}
    }

    我们不是调用SmartPhone.call,而是调用super.call。 在内部,JavaScript引擎会自动为我们执行此操作。

    最后,我们可以使用Iphone创建一个对象,如下所示

    let x = new Iphone();
    
    x.faceIDScan();
    
    // calling inherited method
    console.log(x.isIos()):
    // true

    该ES6示例与先前的构造方法示例相同。 但是阅读和理解起来要干净得多。

    原文:https://javascript.info/prototype-inheritance

    作者:Indermohan Sing

    更多编程相关知识,请访问:编程课程!!

    以上就是JavaScript原型实现继承的方法介绍的详细内容,更多请关注php中文网其它相关文章!

    本文转载于:segmentfault,如有侵犯,请联系a@php.cn删除
    专题推荐:JavaScript 原型 继承
    上一篇:react中页面如何传值 下一篇:react组件几种声明方式是什么
    第14期线上培训班

    相关文章推荐

    • 详解javascript中逻辑赋值运算符• JavaScript输出方式有哪些• JavaScript 构造函数和 "new" 操作符详解• 深入讨论JavaScript中Set对象如何让代码更快• javascript中substr和substring的区别是什么

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网