JavaScript的this关键字的调用位置和绑定

this关键字调用位置

调用位置就是函数在代码中被调用的位置(而不是声明位置)

寻找调用位置就差不多是寻找 函数被调用的位置

var v = 100;
//this经常被定义在函数的作用域中
function fn(){
    
    //默认绑定
    //this总是返回一个对象
    console.log(this.v);//这里的this指向的对象 要看这个函数是被什么调用的
}
fn(); //这样调用函数 那么在浏览器中this就是指的window  因为在浏览器中 fn();就是 window.fn(); window.可以省略
//但在NODE js中global是不可直接调用的


//定义对象 把fn函数作为obj的方法
var obj = {
    
    
    v:200,
    f:fn//这是隐式绑定
}

obj.fn();//在这里 this指向的对象是obj 因为是用obj.调用的fn  这里调用的fn是obj对象的方法 所有this指向的一定是obj
//这就体现了调用位置就是找函数被调用的位置

console.log(this.v);//同理 在浏览器中是指向window对象 浏览器可以不写window.     默认绑定

this关键字的绑定

默认绑定

在一个函数体中使用this,当该函数被独立调用时。

(就是在函数被独立调用时,没有作为一个对象的方法式,this默认指向全局)

但在严格模式下 这样会报错

隐式绑定

需要考虑的是调用位置是否有上下文对象,或者说是否被某个对象拥有或者包含

隐式丢失是最常见的this绑定问题 也就是说本来是隐式绑定但是对象丢失了 变为了默认绑定

//定义全局变量
var v = 100;
//定义函数
function fn(){
    
      //执行顺序 找到了fn()   到这 看看this指向哪里  this的指向取决于调用的位置 调用位置在fun()  fun()在全局  所以在浏览器环境 this指向window 
    console.log(this.v);//默认绑定
}
//创建对象
var obj = {
    
    
    v:200,
    f:fn//隐式绑定    执行顺序 找到了obj.f的方法  找fn方法
}

//定义一个全局变量,并把obj的f方法赋给fun
var fun = obj.f; //执行顺序   找到了定义体 找赋值的obj.f的方法

//fun作为函数调用
fun();//执行顺序 第一步指向fun()  找他的定义体
//这就出现了访问丢失 因为本来是像用obj.f的this 但最后this只取决于调用的位置 
显示绑定

就是明确在调用时,this所绑定的对象

JavaScript中用apply() 或 call() 方法实现

//定义全局变量
var v = 100;
//定义函数
function fn(){
    
     
    console.log(this.v);
}
//创建对象
var obj = {
    
    
    v:200,
    f:fn
}

var fun = obj.f;
fun.apply(obj);//直接规定this的指向 直接明确this指向

猜你喜欢

转载自blog.csdn.net/weixin_44492275/article/details/106779968
今日推荐