从别人的博客里面盗了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. Linux下常用的ftp操作命令

    Linux下常用的ftp操作命令 =========== 完美的分割线 ============= 1.登陆ftp服务器 ftp [IP] [PORT] # 登陆ftp服务器,本机登陆可以不写IP 实 ...

  2. TJU Problem 1644 Reverse Text

    注意: int N; cin >> N; cin.ignore(); 同于 int N; scanf("%d\n",&N); 另:关于 cin 与 scanf: ...

  3. Mongodb $setOnInsert操作符 和upsert:true

    upsert:true:如果要更新的文档不存在的话会插入一条新的记录 $setOnInsert操作符会将指定的值赋值给指定的字段,如果要更新的文档存在那么$setOnInsert操作符不做任何处理: ...

  4. 51Nod:1003 阶乘后面0的数量

    1003 阶乘后面0的数量  基准时间限制:1 秒 空间限制:131072 KB 分值: 5 难度:1级算法题  收藏  关注 n的阶乘后面有多少个0? 6的阶乘 = 1*2*3*4*5*6 = 72 ...

  5. HDU 4640 状态压缩DP 未写完

    原题链接:http://acm.hdu.edu.cn/showproblem.php?pid=4640 解题思路: 首先用一个简单的2^n*n的dp可以求出一个人访问一个给定状态的最小花费,因为这i个 ...

  6. Knight Tournament 合并区间

    Hooray! Berl II, the king of Berland is making a knight tournament. The king has already sent the me ...

  7. ES6必知必会 (三)—— 数组和对象的拓展

    数组的扩展 1.拓展运算符('...'),它相当于rest参数的逆运算,用于将一个数组转换为用逗号分隔的参数序列: console.log(...[1, 2, 3]) // 1 2 3 console ...

  8. Django 数据库操作进阶F和Q操作

    Model中的F F 的操作通常的应用场景在于:公司对于每个员工,都涨500的工资.这个时候F就可以作为查询条件 1 2 3 from django.db.models import F models ...

  9. git的使用方法学习

    1.git常用命令: git stash: 备份当前的工作区的内容,从最近的一次提交中读取相关内容,让工作区保证和上次提交的内容一致.同时,将当前的工作区内容保存到Git栈中. git stash p ...

  10. yugabyte 集成JanusGraph测试

    yugabyte 集成图数据库JanusGraph,原理比较简单就是yugabyte 内置Cassandra,配置好JanusGraph 的访问就可以了. 使用docker 模式部署 创建yugaby ...