当对象与原型有相同的属性，调用时的上下文指向问题

在查阅对象自定义事件及其触发实现的过程中，发现了如下代码：

即：构造函数的原型可以是其他构造方法new出来的对象实例，虽然理解构造函数原型就是一个对象，但通常都是用对象直接量来指定，如：F.prototype ={}，这种用法，引起了一些思考：如果原型对象和构造函数定义了完全相同的属性，那么原型方法调研时，作用域是原型对象还是新的对象？为此，做了一下验证：

function ancestor(){this.name ='default';this.age = 18;}ancestor.prototype = {printInfo:function(){console.log( this.name + "," + this.age );}};function parent( _name,_age ){this.name = _name;this.age = _age;}parent.prototype = new ancestor();var o1 = new parent('tester',20);var o2 = new parent();console.log( o1 );console.log( o2 );

打印结果如下：

可见，对象原型和对象自身，都保留了各自的'name'和'age'属性，继续调用对象o1,o2继承自原型的printInfo方法，代码如下：

        function ancestor(){this.name ='default';this.age = 18;}ancestor.prototype = {printInfo:function(){console.log( this.name + "," + this.age );}};function parent( _name,_age ){this.name = _name;this.age = _age;}parent.prototype = new ancestor();var o1 = new parent('tester',20);var o2 = new parent();console.log('o1-----:');console.log( o1 );console.log('o2-----:');console.log( o2 );o1.printInfo();o2.printInfo();

执行结果：

可见：o1,o2在调用继承自原型的方法时，如果自身有了对应的属性定义，则调研的就是对象自身属性，不会上溯至原型对象。

如想切换作用域至原型对象，可以利用方法的call方式来实现：

o1.printInfo.call(Object.getPrototypeOf(o1));
o2.printInfo.call(Object.getPrototypeOf(o2));

结果：

-------------------------补充---------------------------------------------------------------------------------------------------

上面的情况下，当对象没有定义与原型重合的属性时，调用原型方法，会是什么情况？代码如下:

    function ancestor(){this.name ='default';this.age = 18;}ancestor.prototype = {printInfo:function(){console.log( this.name + "," + this.age );}};function parent(){}parent.prototype = new ancestor();var o1 = new parent();o1.printInfo();

运行结果：

可见，此时最终函数执行的作用域是其原型对象，其实这就是“作用域链”的概念：当对象的方法用到某属性时，会按照对象→原型parent1→原型parent2的链式方式，不断向上追溯查找该属性，直至找到或者为undefined.

转载于:https://www.cnblogs.com/surfer/p/9681514.html

当对象与原型有相同的属性，调用时的上下文指向问题相关推荐

NSMutable属性声明时为什么不能使用copy
在iOS开发里面我们经常会进行NSMutable(可变类型的类,常用的如NSMutableString,NSMutableArray,NSMutableDictionary,NSMutableData ...
【Javascript】通过实例对象修改原型对象属性的值
结论: 当原型对象的属性值为基本数据类型时,无法通过实例对象直接修改原型对象的属性值.当原型对象的属性值为引用数据类型时,可以直接通过实例对象修改原型对象的属性值. 基本类型的数据值有7种:字符串(S ...
js对象，原型，call，apply浅析
//对象直接量,创建对象最简单的方式是在js里使用对象直接量var book = {"main title": "js", //属性里有空格,要用引号" ...
Js 原型对象与原型链(转)
原文出处原创作者: abruzzi 原文图文并茂,很好的说明了原型链的原理,在这里感谢原文作者把文章写的那么通俗易懂. 原型对象每个javascript对象都有一个原型对象,这个对象在不同的解释器 ...
javascript原型对象、原型链、构造函数
1.原型对象(原型).原型链先放一张在网上看到的关于原型和原型链的图,非常不错. 如果你能看懂,那就对原型链有了一定了解,如果看不懂,对照下面这几点来看图: js中所有函数都有一个prototype ...
Javascript中的对象和原型(一)（转载）
面向对象的语言(如Java)中有类的概念,而通过类可以创建任意多个具有相同属性和方法的对象.但是,JavaScript 没有类的概念,因此它的对象也与基于类的语言中的对象有所不同. 要了解面向对象,首 ...
JavaScript对象、原型、原型链知识总结思维导图
这个思维导图是我对Object,原型,原型链等知识的总结,主要参考高程一书第六章,写完才发现这么多,以后可能会进行精简.内容可能会出现差错,欢迎批评指正.下载==>Github ECMAScri ...
Javascript之对象和原型
虽然Object构造函数或对象字面量都可以用来创建单个对象,但这种方式有个弊端:使用同一个接口创建很多对象,会产生大量的重复代码.为了解决这个问题,于是百家争鸣,各种工厂模式的变体应运而生. 1.工厂 ...
为内置对象添加原型方法把局部变量编程全局变量
为内置对象添加原型方法 <!DOCTYPE html> <html lang="en"> <head><meta charset=&quo ...

当对象与原型有相同的属性，调用时的上下文指向问题

当对象与原型有相同的属性，调用时的上下文指向问题相关推荐

最新文章

热门文章