理解prototype
从别人的博客里面盗了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的更多相关文章
- 你不知道的JavaScript--Item13 理解 prototype, getPrototypeOf 和__proto__
1.深入理解prototype, getPrototypeOf和_ proto _ prototype,getPropertyOf和 _ proto _ 是三个用来访问prototype的方法.它们的 ...
- [Effective JavaScript 笔记]第30条:理解prototype、getPrototypeOf和__ptoto__之间的不同
原型包括三个独立但相关的访问器.这三个单词都是对单词prototype做了一些变化. C.prototype用于建立由new C()创建的对象的原型 Object.getPrototypeOf(obj ...
- Javascript学习笔记--理解prototype
prototype和closure是js中两个不好搞懂的概念,幸好网上有很多相关的文章,在网上查了一遍以后,总是是觉得有点理解了.今天先说说prototype. 之前一直被ajax in action ...
- 边绘边理解prototype跟__proto__
网上流传着一张讲解prototype跟__proto__关系的图,尽管他已经描绘的很清楚了,但对于初学者来说,江太公感觉还是过于纠结,于是起心重绘,让他们之间的关系更加明晰可理解,一方面出于分享目的, ...
- JavaScript:理解prototype与__proto__,原型与原型链
JS中的继承是原型继承,通过原型实现的.为了理解原型,我想先讲讲对象的内部属性[[prototype]]和属性__proto__,函数的属性prototype. 对象的内部属性[[prototype] ...
- 一张图理解prototype、proto和constructor的三角关系
× 目录 [1]图示 [2]概念 [3]说明[4]总结 前面的话 javascript里的关系又多又乱.作用域链是一种单向的链式关系,还算简单清晰:this机制的调用关系,稍微有些复杂:而关于原型,则 ...
- 【追寻javascript高手之路04】理解prototype
前言 中午时候我去药店称了下体重,好家伙!我减肥成功了,足足比上个月瘦了10斤!于是想减肥就去郑州吧... 然后回来迷迷糊糊睡了一会,居然想起了周三的面试,有点小遗憾有点小触动. 这次回成都后,还没有 ...
- Effective JavaScript Item 30 理解prototype, getPrototypeOf和__proto__的不同
本系列作为Effective JavaScript的读书笔记. prototype,getPropertyOf和__proto__是三个用来訪问prototype的方法.它们的命名方式非常类似因此非常 ...
- 理解prototype、proto和constructor的三角关系
javascript里的关系又多又乱.作用域链是一种单向的链式关系,还算简单清晰:this机制的调用关系,稍微有些复杂:而关于原型,则是prototype.proto和constructor的三角关系 ...
- 原型理解:prototype
这一系列的链接的原型对象就是原型链(prototype chain) 1.所有对象都有同一个原型对象,都可通过Object.prototype获得对象引用 2.new出来的构造函数对象原型就是构造函数 ...
随机推荐
- Android manifest 获取源代码
/********************************************************************************* * Android manifes ...
- Java乱码解决之道
1.常见字符编码 ASCII编码: ASCII,American Standard Code for Information Interchange,是基于拉丁字母的一套电脑编码系统,主要用于显示现代 ...
- HDU 2072 单词数 详细解答
题目 单词数 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submis ...
- 关于递归函数中的return位置
1.对于求是否有解的问题一般使用bool dfs() 其中return 可以放在递归式后面 2.对于需要更新解的问题一般使用int dfs() 其中return 不能放在递归式后面,必须放在函数最 ...
- Spring学习--静态工厂方法、实例工厂方法创建 Bean
通过调用静态工厂方法创建 bean: 调用静态工厂方法创建 bean 是将对象创建的过程封装到静态方法中 , 当客户端需要对象时 , 只需要简单地调用静态方法 , 而不需要关心创建对象的细节. 要声明 ...
- LG3372 【【模板】线段树 1】
介绍我的三种算法 1.线段树 既然这题是线段树板子,我还是尊重一下先发这个.跑的时间376ms不是很快,但也还是不错.O(nlogn). #include<iostream> #inclu ...
- 不用webservice wcf提供服务,用Rest更轻量
从2005年开始就开始有基于服务的开发方式,到08年时候 微软和sun等公司都已经提供了很多基于服务的开发框架 . 微软 .net 平台的基于服务的框架主要有:.NET Remoting.webser ...
- 树的遍历算法-只有一个变量T-递归和非递归
void PostOrderTraverse(BTNode *T) { //就用到了一个变量T if(T==NULL) return; PostOrderTraverse(T->lchild); ...
- Linux regulator系统
1. 概念:Regulator : 电源芯片, 比如电压转换芯片Consumer : 消费者,使用电源的部件, Regulator是给Consumer供电的machine : 单板,上面焊接有Regu ...
- Linux 安装Jdk、mysql、apache、php、tomcat、nginx
Jdk 安装分三步:第一步,上传跟 linux 位数相同的 jdk tar 包,解压:第二步:解压 tar 包,配置环境变量,且 source 一下 /etc/profile:第三步:检查版本 第一步 ...