从别人的博客里面盗了2张图,这2张图将对象/实例/prototype/__proto__/constructor之间的关系描绘的很清楚。

1.prototype 为 function的属性,实例化的对象(即new之后的对象)没有prototype,只有__proto__,且指向声明该实力对象函数的prototype

2.babel 继承源码分析:

class Base{
constructor(){
this.myname = 'jack';
}
}
Base.$inject = ['$http']
Base.prototype.age = ;
class HostController extends Base{ }

编译后:

'use strict';

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) {
if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); }
  //继承父类的原型方法
subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } });
  //关键步骤,通过__proto__指向父类构造函数,实现父类静态属性,方法的继承
if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
}
//该方法就是判断 实例所属
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } var Base = function Base() {
_classCallCheck(this, Base); this.myname = 'jack';
}; Base.$inject = ['$http'];
Base.prototype.age = ; var HostController = function(_Base) {
_inherits(HostController, _Base); function HostController() {
_classCallCheck(this, HostController); return _possibleConstructorReturn(this, (HostController.__proto__ || Object.getPrototypeOf(HostController)).apply(this, arguments));
} return HostController;
}(Base);

3.es6 中class extends 继承,不仅继承了父类在构造函数中定义的属性方法,还可以继承父类原型链上的属性和方法,最后还有,父类定义的静态属性和方法也能继承,只不过子类调用父类的静态方法必须写为:Child.xxx(子类.父类属性或方法)。

  

class Base{
constructor(){
this.name = 'jack'
}
say(){
console.log('.............');
}
} Base.inject = ['Base'];
Base.prototype.age = ; class Child extends Base{ } var c = new Child();
c.name;
c.say();
Child.inject;

4.在babel继承中,使用到了Object.setPrototypeOf()方法,该方法有2个参数:

  Object.setPrototypeOf(obj,prototype):obj代表要目标对象,将prototype参数指定的对象赋给obj的__proto__,等同于:obj.__proto__ = prototype;

http://www.cnblogs.com/xiaohuochai/p/5721552.html

理解prototype的更多相关文章

  1. 你不知道的JavaScript--Item13 理解 prototype, getPrototypeOf 和__proto__

    1.深入理解prototype, getPrototypeOf和_ proto _ prototype,getPropertyOf和 _ proto _ 是三个用来访问prototype的方法.它们的 ...

  2. [Effective JavaScript 笔记]第30条:理解prototype、getPrototypeOf和__ptoto__之间的不同

    原型包括三个独立但相关的访问器.这三个单词都是对单词prototype做了一些变化. C.prototype用于建立由new C()创建的对象的原型 Object.getPrototypeOf(obj ...

  3. Javascript学习笔记--理解prototype

    prototype和closure是js中两个不好搞懂的概念,幸好网上有很多相关的文章,在网上查了一遍以后,总是是觉得有点理解了.今天先说说prototype. 之前一直被ajax in action ...

  4. 边绘边理解prototype跟__proto__

    网上流传着一张讲解prototype跟__proto__关系的图,尽管他已经描绘的很清楚了,但对于初学者来说,江太公感觉还是过于纠结,于是起心重绘,让他们之间的关系更加明晰可理解,一方面出于分享目的, ...

  5. JavaScript:理解prototype与__proto__,原型与原型链

    JS中的继承是原型继承,通过原型实现的.为了理解原型,我想先讲讲对象的内部属性[[prototype]]和属性__proto__,函数的属性prototype. 对象的内部属性[[prototype] ...

  6. 一张图理解prototype、proto和constructor的三角关系

    × 目录 [1]图示 [2]概念 [3]说明[4]总结 前面的话 javascript里的关系又多又乱.作用域链是一种单向的链式关系,还算简单清晰:this机制的调用关系,稍微有些复杂:而关于原型,则 ...

  7. 【追寻javascript高手之路04】理解prototype

    前言 中午时候我去药店称了下体重,好家伙!我减肥成功了,足足比上个月瘦了10斤!于是想减肥就去郑州吧... 然后回来迷迷糊糊睡了一会,居然想起了周三的面试,有点小遗憾有点小触动. 这次回成都后,还没有 ...

  8. Effective JavaScript Item 30 理解prototype, getPrototypeOf和__proto__的不同

    本系列作为Effective JavaScript的读书笔记. prototype,getPropertyOf和__proto__是三个用来訪问prototype的方法.它们的命名方式非常类似因此非常 ...

  9. 理解prototype、proto和constructor的三角关系

    javascript里的关系又多又乱.作用域链是一种单向的链式关系,还算简单清晰:this机制的调用关系,稍微有些复杂:而关于原型,则是prototype.proto和constructor的三角关系 ...

  10. 原型理解:prototype

    这一系列的链接的原型对象就是原型链(prototype chain) 1.所有对象都有同一个原型对象,都可通过Object.prototype获得对象引用 2.new出来的构造函数对象原型就是构造函数 ...

随机推荐

  1. SWIFT解析天气JSON格式

    访问以下链接可以得到京城当天的天气:http://www.weather.com.cn/adat/sk/101010100.html 返回的JSON格式如下: {"weatherinfo&q ...

  2. PAT 数列求和-加强版   (20分)(简单模拟)

    给定某数字A(1≤A≤9)以及非负整数N(0≤N≤100000),求数列之和S=A+AA+AAA+⋯+AA⋯A(N个A).例如A=1, N=3时,S=1+11+111=123 输入格式: 输入数字A与 ...

  3. git中的分支管理

    /*游戏或者运动才能让我短暂的忘记心痛,现如今感觉学习比游戏和运动还重要——曾少锋*/ 如果对git基础不太熟悉的可以参考:http://www.cnblogs.com/zengsf/p/750621 ...

  4. MVC 模型 视图, 控制器 写 三级联动

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  5. 状压dp2

    2018年全国多校算法寒假训练营练习比赛(第二场) https://www.nowcoder.com/acm/contest/74/F 上一篇状压dp例题由于每个位置都含有一个非负数,所以不需要判断能 ...

  6. mac OS 安装 scikit-learn

    最近用来做实验,使用python时发现scikit-learn提供的库非常好用.因此,在电脑上果断下载安装: step1: sudo easy_install pip step2: sudo pip ...

  7. 实现多线程的方式之实现Callable接口

    package com.hls.juc; import java.util.concurrent.Callable;import java.util.concurrent.ExecutionExcep ...

  8. go http 传递json数据

    上篇博文中简单介绍了Go HTTP的Server 和Client.本文介绍如何在HTTP中传递json格式的数据. Server package main import ( "encodin ...

  9. 【appium】根据accessibility_id定位元素

    如何获得AccessibilityId 可以通过UIAutomatorViewer或者Appium Inspector获得.Accessibility ID在Android上面就等同于contentD ...

  10. SVN同步

    SVN同步:1.在备份服务器上安装SVN,之后创建同名的库名2.在备机的Repositories的库文件夹下的hooks目录下,备份并修改pre-revprop-change.tmpl文件为pre-r ...