js this的指向详解

js 的this指向主要有四种:

1.作为对象的方法调用,这个时候this指向的事该对象

例如: var obj={

a:1,

getA:function(){

alert(this===obj);//true

alert(this.a);//1

}

}


2.作为普通函数调用,这个时候this总是指向全局对象(在浏览器中既window对象)

window.name='zhangshan';

var getName=function(){

console.log(this.name);//zhangshan

}


3.作为构造器调用,这个时候this的指向就分情况了,主要是看构造器有没有显式返回一个对象。

当用new 运算符调用函数时,该函数总会返回一个对象,通常情况this就是指向这个对象的

但是如果构造器显式的返回一个object类的对象,那么运算结果最终返回的事那个对象而不是this,所以这个时候this指向的对象就是显式返回的那个对象

var MyClass1 = function() {
    this.name = '111';
}
var obj1 = new MyClass1();
alert(obj1.name); //111

var MyClass2 = function() {
    this.name = '111';
    return { //显式的返回一个对象
        name: '222';
    }
}
var obj2 = new MyClass2();
alert(obj2.name); //222
4.Function.prototype.call或者Function.prototype.apply可以动态改变this

两者的功能完全一样,只是参数不同

call第一个参数是this要指向的上下文,后面跟着的参数不固定,都是当成函数的参数传递进去

apply第一个参数也是this要指向的上下文,后面是一个数组或者类数组,数组的每一项按照顺序当成是函数的参数传递进去,也可以这样理解这个数组就是函数的arguments 

var obj1 = {
    name: '111';
}
var obj2 = {
    name: '222';
}
window.name = 'window';
var getName= function(a,b) {
    alert(this.name);
    alert(a);
    alert(b);
}

getName();//window,undefined,undefined;

getName.call(obj1,'a','b');//111,a,b

getName.apply(obj2,'a','b');//222,a,b


就这麽简单:

1.总结来讲,call和apply都是为了改变某个函数运行时的上下文,换句话说就是改变函数内部this的指向,js的函数上下文

可以分为定义时上下文,运行时上下文。而且上下文是可以改变的。


2.为什么要改变向上下文呢????????? 主要是为了实现一种情况,当一个对象没有某个方法

的时候,而且另外一个对象却有这个方法,这个时候就可以通过改变上下文来使用自己没有的方法了。

比如:obj1没有showName()方法,obj2有,这个时候可以这个样子使用,var temp=obj1.prototype.call(obj2);这样就可以用obj2的方法了


3.那什么时候用call什么时候用apply????????

当参数个数是固定不变的时候可以用call,当参数个数不确定可以用apply,把要传递的参数push到一个数组里面然后传递给函数


  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
YOLO高分设计资源源码,详情请查看资源内容使用说明 YOLO高分设计资源源码,详情请查看资源内容使用说明 YOLO高分设计资源源码,详情请查看资源内容使用说明 YOLO高分设计资源源码,详情请查看资源内容使用说明YOLO高分设计资源源码,详情请查看资源内容使用说明YOLO高分设计资源源码,详情请查看资源内容使用说明YOLO高分设计资源源码,详情请查看资源内容使用说明YOLO高分设计资源源码,详情请查看资源内容使用说明YOLO高分设计资源源码,详情请查看资源内容使用说明YOLO高分设计资源源码,详情请查看资源内容使用说明YOLO高分设计资源源码,详情请查看资源内容使用说明YOLO高分设计资源源码,详情请查看资源内容使用说明YOLO高分设计资源源码,详情请查看资源内容使用说明YOLO高分设计资源源码,详情请查看资源内容使用说明YOLO高分设计资源源码,详情请查看资源内容使用说明YOLO高分设计资源源码,详情请查看资源内容使用说明YOLO高分设计资源源码,详情请查看资源内容使用说明YOLO高分设计资源源码,详情请查看资源内容使用说明YOLO高分设计资源源码,详情请查看资源内容使用说明YOLO高分设计资源源码,详情请查看资源内容使用说明YOLO高分设计资源源码,详情请查看资源内容使用说明YOLO高分设计资源源码,详情请查看资源内容使用说明YOLO高分设计资源源码,详情请查看资源内容使用说明YOLO高分设计资源源码,详情请查看资源内容使用说明YOLO高分设计资源源码,详情请查看资源内容使用说明YOLO高分设计资源源码,详情请查看资源内容使用说明
回答: 在JavaScript,构造函数的this指向创建的实例对象。当使用new操作符调用构造函数时,this就指向了新生成的对象。这一点非常重要。举个例子来说明,比如有一个构造函数Person,当使用new操作符创建一个实例对象p时,构造函数的this指向了这个新生成的实例对象。例如: ```javascript function Person() { this.name = "Tiny Colder"; var age = 22; window.age = 22; } var p = new Person(); console.log(p.name); // "Tiny Colder" console.log(p.age); // undefined console.log(window.age); // 22 ``` 在上面的例子,构造函数Person的this指向了新生成的实例对象p,所以通过p访问name属性可以得到正确的值,而通过p访问age属性则得到undefined,因为age是在构造函数用var声明的局部变量,并没有添加到this上。而window.age是在构造函数用window对象添加的全局变量,所以可以通过window对象访问到。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [js构造函数this的指向问题?](https://blog.csdn.net/m0_53892583/article/details/116525105)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *3* [JavaScriptthis的指向 详解](https://blog.csdn.net/qq_52320207/article/details/116762893)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值