详解JavaScript原型对象的this指向问题
程序员文章站
2022-03-26 08:58:07
目录一、this指向二、修改this指向1、call()方法2、apply()方法总结一、this指向构造函数中的this 指向实例对象。那么原型对象this的指向呢?如下:function stud...
一、this指向
构造函数中的this 指向实例对象。那么原型对象this的指向呢?
如下:
function student(age,name){ this.age = age; this.name = name; } var that; student.prototype.score = function(){ console.log('孩子们成绩都很好!'); that = this; } var xl = new student(18,'小熊'); xl.score(); console.log(that === xl);
定义一个全局变量that,在score函数里面给它赋值,让其指向函数里面的this,调用实例对象的score方法,判断that和实例对象是否一致,如果一致,则说明原型对象this的指向是该实例。
打印结果为:
即原型对象里面放的是方法, 这个方法里面的this 指向的是 这个方法的调用者, 也就是这个实例对象。
二、修改this指向
1、call()方法
写一个简单的两数相加的函数。
function fn(a,b){ console.log(a+b); console.log(this); } fn(1,2)
在函数内部打印this,调用函数,看其this的指向。
可知this指向window对象,如果我们想让this指向我们新创建的一个对象,怎么操作呢?
先定义一个对象,
o = {};
然后通过call()修改this指向,让其指向新创建的对象o
o = { name: 'xl' }; fn.call(o,1,2);
打印结果为:
现在this指向新创建的对象o,即修改成功。
2、apply()方法
apply()和call()方法基本相同,这里就不赘述,直接上代码:
function fn(a,b){ console.log(a+b); console.log(this); } o = { name: 'xl' }; fn.apply(o,[1,2]);
可以发现,这两种方法还是有区别的,即:call()接受的参数必须是连续参数,而apply()方法接收参数的形式是数组参数。
总结
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注的更多内容!
推荐阅读
-
详解Vue中数组和对象更改后视图不刷新的问题
-
JavaScript 嵌套函数指向this对象错误的解决方法_javascript技巧
-
JavaScript中的原型与原型链详解
-
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题_javascript技巧
-
javascript对象的多种合并方式详解
-
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
-
详解JS中定时器setInterval和setTImeout的this指向问题
-
基于Android中Webview使用自定义的javascript进行回调的问题详解
-
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
-
详解JavaScript编程中的window与window.screen对象