javascript--this机制

本文详细介绍了JavaScript中this的四种绑定规则:默认绑定、隐式绑定、显式绑定及new绑定。并通过实例展示了如何判断this的实际绑定情况。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

  this在javascript中很常见同时也是种比较复杂的机制,正确地了解this并且学会正确使用,可以让我们写出更高效、优雅的代码。

  this是在代码运行时进行绑定的,并不在编写时,它的上下文环境取决于韩式调用时的各种条件。this的绑定和函数声明的位置没有任何的关系,只取决于函数的调用方式。

 

this的四种绑定规则

1、默认绑定

 function foo(){
        console.log(this.a);  
   }
   var a = 2;
   foo();           //2

调用foo()时,内部的this会指向全局对象,应用了this的默认绑定

但是,如果实在严格模式下的话,this就是指向了undefined了

 

2、隐式绑定

function foo(){
        console.log(this.a);  
   }

   var obj = {
        a : '3',
        foo : foo      
   }
   obj.foo();      //3

声明对象obj,属性foo是引用了函数foo,当obj.foo()调用时,隐式绑定规则会把函数调用的this绑定到这个obj上下文对象

 

3、显式绑定

function foo(){
        console.log(this.a);  
   }

    var obj2 = {
        a : 4
    }

    foo.call(obj2);    //4

通过foo.call()可以在调用foo时强制把它的this绑定到obj上

 

4、new绑定

function baz(a){
    this.a = a
}
var bar = new baz(5);
console.log(bar.a);

使用new关键字调用函数会发生什么操作在上篇博文也有介绍到,构造出一个新对象并把它绑定到baz调用中的this上

 

判断this规则

我们可以按照以下的规则来判断this是应用了哪个规则:

1、函数是否在new中调用?是的话this绑定的是新创建对象

var bar = new foo();

2、函数是否通过call、apply显式绑定?是的话this绑定了指定对象

foo.call(obj);

3、函数是否在某个上下文调用隐式绑定,是的话this绑定那个上下文对象

obj.foo()

4、如果都不是的话,this则应用了默认绑定

 

绑定例外

当我们把null和undefined作为this的绑定对象传入call、apply时,这些值会被忽略,实际上是应用了默认绑定

function foo(){
        console.log(this.a);  
   }
   var a = 2;
   foo.call(null);           //2

  

如果文中有出现错误的地方,欢迎大家指正

转载于:https://www.cnblogs.com/weapon-x/p/5335125.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值