原型链、继承和 instanceof

hqman 发布于2019-08-20 14:31 / 2357人阅读

摘要：原型链继承和参考理解的原型链和继承实现了什么操作的过程发生了什么原型链和属性原型链是什么上面的是什么就是原型链，原型链是内部，指向它父类的。通过这一句说明的原型链就是指向函数的属性。这可以为后面提到的继承做准备。

原型链、继承和 instanceof

参考：
MDN：instanceof
MDN：Inheritance and the prototype chain
理解JavaScript的原型链和继承

new实现了什么操作

new的过程发生了什么？

function A(name){
  this.name = name
}
var a = new A("hehe")

 // var a = new A("hehe") =>
 var a = new Object();
 a.__proto__ = A.prototype; 
 A.call(a, "hehe");

原型链和prototype属性 原型链是什么

上面的 __proto__ 是什么？
就是原型链，原型链是内部 [ [Prototype ]]，指向它“父类”的prototype。

打开浏览器控制台，可以看到函数变量都有一个prototype属性（箭头函数没有）。
通过这一句a.__proto__ = A.prototype; 说明a的原型链就是指向函数A的prototype属性。

这里就有一个重要的认识了，虽然名字很像，但是原型链并不是prototype属性，同时原型链指向“父类”的prototype。几乎所有对象都有原型链（除了null和undefined），通过__proto__ 可以看到原型链指向什么（当然最好使用 Object.getPrototypeOf 取原型链）

通过实验可以发现，js中对象的链可以非常复杂。
一图胜千言。这里借一张图。

简而言之

函数对象，Function，Object，Array等等的原型链都指向Function.prototype

通过new操作符创建的对象原型链指向原来的函数的prototype属性

Object.prototype属性的原型链指向null（到null就停止了）

而Function.prototype（Array，Date，String等等），以及函数对象的prototype，原型链都指向Object.prototype

prototype属性究竟是什么呢

可以看到是一个Object，有constructor和原型链。constructor是一个函数，也就是函数自身。这可以为后面提到的继承做准备。

instanceof什么意思

The instanceof operator tests whether an object has in its prototype chain the prototype property of a constructor.

Syntax：
object instanceof constructor

意思就是object.__proto__===constructor.prototype

MDN的教程中举例

// defining constructors
function C() {}
var o = new C();
// true, because: Object.getPrototypeOf(o) === C.prototype
o instanceof C;

但是

var simpleStr = "This is a simple string"; 
var myString  = new String();

simpleStr instanceof String; // returns false, checks the prototype chain, finds undefined

可是在浏览器中试验Object.getPrototypeOf(simpleStr) === String.prototype
结果是true，大概这算作一个特殊情况

如何实现继承

https://babeljs.io/repl/
可以在这个网站在线编译并查看结果

class A{
  constructor(name) {
    this.name= name
  }
  toString() {
    return this.name
  }
}
class B extends A {
  toString(){
    return this.name + "b"
  }
}

编译出来的ES5继承

function _inherits(subClass, superClass) { 
    subClass.prototype.__proto__=superClass.prototype;
}
var A = (function () {
    function A(name) {
        this.name = name;
    }
    A.prototype.toString = function toString() {
        return this.name;
    };
    return A;
})();
var B = (function (_A) {
    function B() {
        if (_A != null) {
            _A.apply(this, arguments);
        }
    }
    _inherits(B, _A);
    B.prototype.toString = function toString() {
        return this.name + "b";
    };
    return B;
})(A);

简单来说就是这样

GPU云服务器云服务器原型链继承 js原型链的继承原型继承原型原型链

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

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

JavaScript系列--浅析原型链与继承

摘要：综上所述有原型链继承，构造函数继承经典继承，组合继承，寄生继承，寄生组合继承五种方法，寄生组合式继承，集寄生式继承和组合继承的优点于一身是实现基于类型继承的最有效方法。一、前言继承是面向对象（OOP）语言中的一个最为人津津乐道的概念。许多面对对象（OOP）语言都支持两种继承方式:：接口继承和实现继承。接口继承只继承方法签名,而实现继承则继承实际的方法。由于js中方法没有签名...

draveness 2019-08-23 18:06 评论0 收藏0
如何理解JavaScript的原型和原型链？

摘要：之前有朋友问怎么去理解原型和原型链的问题。理解原型链的小技巧将箭头视作泛化子类到父类关系那么图中所有的虚线将构成一个继承层级，而实线表示属性引用。原型链是实现继承的重要方式，原型链的形成是真正是靠而非。之前有朋友问怎么去理解原型和原型链的问题。这个问题，在面试中，很多同学经常都会遇到。这里给大家讲讲，方便大家记忆。 JavaScript的特点JavaScript是一门直译式脚本...

xuexiangjys 2019-08-02 16:12 评论0 收藏0
如何理解JavaScript的原型和原型链？

摘要：之前有朋友问怎么去理解原型和原型链的问题。理解原型链的小技巧将箭头视作泛化子类到父类关系那么图中所有的虚线将构成一个继承层级，而实线表示属性引用。原型链是实现继承的重要方式，原型链的形成是真正是靠而非。之前有朋友问怎么去理解原型和原型链的问题。这个问题，在面试中，很多同学经常都会遇到。这里给大家讲讲，方便大家记忆。 JavaScript的特点JavaScript是一门直译式脚本...

adie 2019-08-23 16:54 评论0 收藏0
JS中继承方式总结

摘要：三组合继承结合原型链方式和借用构造函数方式的有点，进行改进的一种继承方式。四寄生组合式继承为了解决组合继承中子构造函数的原型链出现冗余的属性和方法，引入的一种继承方式。说在前面：为了使代码更为简洁方便理解，本文中的代码均将非核心实现部分的代码移出。一、原型链方式关于原型链，可点击《深入浅出，JS原型链的工作原理》，本文不再重复叙述。思路：让子构造函数的原型等于父构造函数的实例...

rottengeek 2019-08-26 13:27 评论0 收藏0
面向对象的小九九

摘要：由构造函数返回的对象就是表达式的结果。如果构造函数没有显式返回一个对象，则使用步骤创建的对象。运算符返回一个布尔值，表示对象是否为某个构造函数的实例。面向对象本人能力有限，有误请斧正本文旨在复习面向对象(不包含es6) 本文学习思维创建对象的方式，获取对象属性构造函数,构造函数的new 做了什么原型与原型对象原型链继承(借用构造继承、原型继承、组合继承、寄生组合继承)...

时飞 2019-08-22 18:16 评论0 收藏0