关于JS call apply 对象、对象实例、prototype、Constructor、__proto__
关于call与apply的理解容易让人凌乱,这里有个方法可供参考
tiger.call(fox,arg1,arg2...)
tiger.apply(fox,[arg1,arg2...])
理解为
fox入侵者,是狡猾、邪恶的入侵者,乘tiger为难之际(召唤call\apply),成功欺骗tiger可怜的守卫(入口参数),入侵了tiger,
拥有了tiger的一切:财富、老婆、孩子... 可恨、可叹tiger英雄一世,如此落入宵小之手
关于函数对象、对象实例、prototype、Constructor、__proto__之间的关系如下图所示:
js完全可以面向对象开发,于是对象、对象继承、实例之间如何建立彼此的关系是javascript
语言必须要解决的问题,通过下面这张图,对象A、对象实例A1和A2,以及prototype、
constructor(构造函数)、__proto__之前是多么巧妙地结合起来组成一张关系网;
所以为了组成这个关系网,必须设立以下规则:
1.任何对象都有一个属性:prototype,这个属性的类型是对象
2. 任何对象实例都拥有constructor方法和__proto__属性
于是对象属性prototype用于关联Prototype(虚拟),对象实例化A1\A2...后,每个实例,包括Prototype
的constructor用于关联对象,同时为了能够动态共享prototype,每个实力的__proto__属性用于关联prototype
如此,这张关系网形成了;这实际是完美的抽象了客观世界:具备什么特质、能干什么、与其他个体是什么关系
引用一网友的实例、辅助理解
function base () {
this.arr = [];
}
function sub (){
}
sub.prototype= new base();
var a = new sub();
var b = new sub();
console.log(b.arr.length); //0
a.arr[0]='moersing';
console.log(b.arr.length); //1
可以看出,arr是一个共享的,如果说不适用this.arr而用 var arr = [] 的话,sub访问不到,只能通过父类的闭包来访问,但是问题还是存在的。如果想继承一个完全独立的引用类型:
第一 :
function base () {
this.arr = [];
}
function sub (){
base.call(this);// 先加上一个实例属性
}
sub.prototype= new base();
var a = new sub();
var b = new sub();
console.log(b.arr.length); //0
a.arr[0]='moersing';
console.log(b.arr.length); //0
console.log(a.arr.length); //修改了a,b不受影响
这个问题可以解决,但是不完美,可以看出, a和b有一个实例属性arr和一个prototype的arr,也就是说。
a.arr[0] = 'moersing' ;
console.log(a.arr.length); //1
delete a.arr; //把属性实例干掉
console.log(a.arr.length);// 这个时候访问的是 prototype的。
所以,理论上来讲,这并不能算是完美的,变量也是需要内存的不是吗?好OK,那么,接下来,使用另一种,上面那个叫 借用继承。
接下来这种方式比较完美,但是也不是那么复杂,主要是使用借用继承的思想罢了,也就是说,借用实例和借用原型分开。
function base() {
this.arr = [];
}
base.Constructor = function () { //添加一个原型构造函数
//这里判断一下,如果是一个函数,并且不是一个正则表达式对象,IE7会把正则反映成一个function而不是一个object
if (typeof this === 'function' && typeof this.prototype.source === 'undefined') {
var fn = this.prototype;
fn.name = 'moersing';
fn.age = '18';
fn.getFull = function () {
console.log(this.name + '|' + this.age);
};
}
else {
throw new TypeError('this is not a function');
}
};
function sub() {
base.call(this); //借用构造函数,实例化一个实例属性
}
base.Constructor.call(sub); //再调用父类的方法,构造出一个prototype的。
var a = new sub();
var b = new sub();
a.arr[0] = 'moersing'; //给a实例的引用类型添加一个元素
console.log(a.arr.length); //结果是1
console.log(b.arr.length); //结果是0,也就是没有收到影响
console.log(a.name); //打印a.prototype的属性
console.log(b.name); //打印b.prototype的属性
b.name = 'linfo'; //修改b的。
console.log(b.name); //linfo
console.log(a.name); //a没有影响,还是moersing
a.getFull(); //moerisng|18
b.getFull(); //linfo |18
关于JS call apply 对象、对象实例、prototype、Constructor、__proto__的更多相关文章
- prototype/constructor/__proto__之prototype简单应用
一.简单使用构造原型加prototype造简单的轮子. 1.想jQ那样获取HTML元素,先看JS代码 function Cmf() { //创建构造函数 this.arry = [] } Cmf.pr ...
- 原型模式Prototype,constructor,__proto__详解
最近由于在找工作,又拿起<JavaScript高级程序设计>看了起来,从中也发现了自己确实还是有很多地方不懂,刚刚看到原型模式这里,今天终于搞懂了,当然,我也不知道自己的理解是否有错. 1 ...
- prototype/constructor/__proto__之constructor。
1.constructor的字面意思就是构造.它是对象的一个属性,它对应的值是该对象的“构造者” //一.构造函数实例化的对象的constructor function Cmf(n,m){ this. ...
- prototype/constructor/__proto__之prototype
1任何对象都有__proto__属性 属性值Object2并不是所有对象都有prototype属性.只有方法对象(构造函数)以及基本数据类型还有Array,有prototype属性;并且所有方法(对象 ...
- 理解js中的原型链,prototype与__proto__的关系
说到prototype,就不得不先说下new的过程. 我们先看看这样一段代码: 1 <script type="text/javascript"> 2 var Pers ...
- 【转】理解js中的原型链,prototype与__proto__的关系
说到prototype,就不得不先说下new的过程. 我们先看看这样一段代码: 1 <script type="text/javascript"> 2 var Pers ...
- [转]理解js中的原型链,prototype与__proto__的关系
本文转自:http://rockyuse.iteye.com/blog/1426510 说到prototype,就不得不先说下new的过程. 我们先看看这样一段代码: 1 <script typ ...
- prototype constructor __proto__
constructor, prototype, __proto__ 详解
- 为什么实例没有prototype属性?什么时候对象会有prototype属性呢?
为什么实例没有prototype属性?什么时候对象会有prototype属性呢? javascript loudou 1月12日提问 关注 9 关注 收藏 6 收藏,554 浏览 问题对人有帮助,内容 ...
- [Javascript] js的类和对象
类 graph LR 类-->构造函数 类-->prototype对象 类-->instanceof运算符 类-->constructor属性 类-->isPrototy ...
随机推荐
- 关于OSG+QT+VS版本的问题
CMake3.10.0 Qt5.11.0安装包只有VS2017_64版本,没有VS2017的32位版本,有VS2015的32位版本 Qt5.11.0+osg3.4在CMake的时候,会出现 CMake ...
- Unity关闭shader中的光照模型以及如何自定义光照模型
// Upgrade NOTE: replaced '_World2Object' with 'unity_WorldToObject' // Upgrade NOTE: replaced '_Wor ...
- WP8.1学习系列(第五章)——中心控件Hub或透视控件Pivot交互UX
具有主页菜单(中心或透视控件)的中心应用中心 你可能要设计包含许多功能的应用.当你看着这些功能时,可能会决定将它们整理到独立的区域中.这些区域最终会成为用户要访问的应用的独立部分.你需要设计一个简便的 ...
- JAVA知多少
读<java解惑>感觉有意思的就记录一下. 1.判断奇数还是偶数 public boolean isOdd(int i){ return i%2==1; }; 这样子看起来很对,但是考虑到 ...
- Oracle 学习之触发器
1. 触发器简介 触发器是存储在数据库服务器中的程序单元,当一个表或一个视图被改变,或者数据库发生某些事件时,Oracle会自动触发触发器,并执行触发器中的代码.只有在触发器中定义的事件发生时,触发器 ...
- JDBC的驱动是如何加载的
注:本文出处:http://www.cnblogs.com/jiaoyiping/ 转载请保留出处 JDBC定义了一套接口,数据库产品的提供商会实现这些接口来提供自己的数据库驱动程序,这是个很好的面向 ...
- 关于windows 7系统下开启休眠功能的方法
今天笔者新装了一个windows 7操作系统,装完后,点击开始按钮.鼠标放到关机处的左边扩展选项时,没有发现休眠选项. 于是开始上网查询解决方法,并将过程记录如下: 首先简单的介绍一下休眠功能:休眠( ...
- 【BZOJ2138】stone Hall定理+线段树
[BZOJ2138]stone Description 话说Nan在海边等人,预计还要等上M分钟.为了打发时间,他玩起了石子.Nan搬来了N堆石子,编号为1到N,每堆包含Ai颗石子.每1分钟,Nan会 ...
- dhroid - Dhdb orm简化sqlite数据库操作
android数据库其实使用的不多,dhroid框架中的网络缓存使用了数据库我就写了也写了一个数据库操作工具 dhroid 数据库基本还是单表操作多,为了简单我只做了单表,那些级联,懒加载,什么的分两 ...
- python添加Windows环境变量
1.cmd中添加方式 SET PATH=%PATH%;c:\Program Files (x86)\Wireshark 注:如上代码添加c:\Program Files (x86)\Wireshark ...