理解JavaScripte this关键字

    JavaScipte由于其在运行期进行绑定的特性,JavaScripte中的this可以是全局对象、当前对象或者任意对象,这完全取决于函数的调用方式。JavaScripte中的函数调用有以下几种方式

  • 作为对象方法调用
  • 作为函数调用,作为构造函数调用
  • 使用apply或call调用

    随着函数使用场合不同,this的值会发生变化。但是总有一个原则。下面用一张”JavaScripte this决策树“(非严格模式下)来说明如何对this进行判断(dot(.)代表方法)。


这里写图片描述

例子1(作为方法调用)

var point={
    x:0,
    y:0,
    moveTo:function(x,y){
        this.x=this.x+x;
        this.y=this.y+y;
    }
};

point.moveTo(1,1);

代码解析:

  1. point.moveTo函数是用new进行调用的么?答:不是,进入否
  2. point.moveTo函数是用dot(.)进行调用的,即进入”是“分支”
  3. 这里的this指向.moveTo之前的调用对象,即指向point

例子2(纯粹函数调用)

function test() {
    this.x = 1;
    alert(x);
}
test();

代码解析

  1. test()函数调用时用new进行调用的吗?答:不是,进入“否”分支
  2. test()函数不是用dot(.)调用的,即进入“否”分支
  3. 则这里的this指向全局变量window,那么this.x实际上就是window.x

例子3(构造函数调用)

function Point(x,y){
    this.x=x;
    this.y=y;
}
var np=new Point(1,1);
np.x;//==1
var p=Point(2,2);
px.x;//==error,p是一个空对象
window.x;//==2

(1)判定Point(1,1)函数在var np=new Point(1,1)中this

  1. var np=new Point(1,1)调用是用new进行调用吗?答:是,进入“是”分支
  2. this指向np
  3. 则this.x=1,即np.x=1;

(2)判定Point(1,1)函数在var p=Point(1,1)中this

  1. var p=Point(2,2)调用时用new进行调用吗?答:否,进入“否”分支
  2. Point(2,2)函数使用doc(.)进行调用吗?答:否,进入“否”分支
  3. this指向全局表露window,那么this.x==window.x
  4. this.x=2即window.x=2;

例子4(call和apply进行调用)

function Point(x,y){
    this.x=x;
    this.y=y;
    this.moveTo=function(x,y){
        this.x=x;
        this.y=y;
    }
}
var p1=new Point(0,0);
var p2=new {x:0,y:0};
p1.moveTo.apply(p2,[10,10]);    //apply实际上为p2.moveTo(10,10);
p2.x//==10

p1.moveTo.apply(p2,[10,10])判断过程如下

  1. apply和call这两个方法允许切换函数执行的上下文环境(context),也即使切换this绑定的对象。p1.moveTo.apply(p2,[10,10])实际上是p2.moveTo(10,10)
  2. p2.moveTo(10,10)函数调用是用new进行调用的吗?答:不是,进入“否”分支
  3. p2.moveTo(10,10)函数是用dot(.)进行调用的,即进入“是”分支,
  4. 即这里的this指向调用moveTo(10,10)的的对象,即p2,所以p2.x=10;

this含义如此之多的原因

    JavaScripte中的函数既可以被当作普通函数执行,也可以作为对象的方法执行。一个函数被执行时,会创建一个执行环境(ExecutionContext),函数的所有的行为均发生在此执行环境中,构建 改执行环境时,JavaScript首先会创建argument变量,其中包含调用函数时传入的参数。接下来创建作用域链。然后初始化变量,首先初始化 函数的形参表,值为argument变量中对应的值,如果argument变量中没有对应值,则该形参初始化为undefined。如果该函数中有内部函数,则初始化这些内部函数。如果没有,继续初始化改函数内定义的局部变量,需要注意的是此时这些变量初始化为undefined,其复制操作在执行环境创建成功后,函数执行时才会执行。最后为this变量赋值,如前所述,会根据函数调用方式的不同,付给this全局对象,当前对象,至此,函数的执行环境创建成功,函数开始执行,所需变量均从之前构建好的执行环境中读取。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: "this"关键字JavaScript中表示当前上下文中的对象。在函数中,"this"指向调用该函数的对象,而在全局作用域中,"this"指向全局对象(通常是window对象)。使用"this"关键字可以访问对象的属性和方法。 ### 回答2: JavaScript中的`this`关键字是一个非常重要的概念,它代表着当前函数的执行上下文(execution context)。它表示了当前代码正在执行的情境,在不同的情境下,`this`所代表的对象是不同的。 在全局作用域下,`this`指向的是全局对象,在浏览器中为`window`对象,在Node.js中为`global`对象。如下所示: ```javascript console.log(this === window); // true,在浏览器中输出 true ``` 当在一个函数中使用`this`关键字时,`this`所代表的对象会根据函数的调用方式而变化。常见的函数调用方式有四种,分别是函数调用、方法调用、构造函数调用和apply/call/bind方法调用。 1. 函数调用时,`this`指向全局对象或undefined(严格模式下)。 ```javascript function test() { console.log(this); } test(); // 全局作用域下 this 指向 window,输出 window ``` 2. 方法调用时,`this`指向调用该方法的对象。 ```javascript var person = { name: 'Tom', sayHello: function() { console.log('Hello, ' + this.name); } } person.sayHello(); // 方法调用,此时的 this 指向 person 对象,输出 Hello, Tom ``` 3. 构造函数调用时,`this`指向新创建的对象。 ```javascript function Person(name) { this.name = name; } var tom = new Person('Tom'); // 构造函数调用,此时的 this 指向新创建的对象 tom console.log(tom.name); // 输出 Tom ``` 4. apply/call/bind方法调用时,`this`指向指定的对象。 ```javascript var person1 = { name: 'Tom' }; var person2 = { name: 'Jerry' }; function sayName() { console.log('My name is ' + this.name); } sayName(); // 输出 My name is undefined sayName.apply(person1); // apply方法调用,此时的 this 指向 person1 对象,输出 My name is Tom var sayName1 = sayName.bind(person2); sayName1(); // bind方法调用,此时的 this 指向 person2 对象,输出 My name is Jerry ``` 总之,`this`关键字的作用非常重要,它可以让我们更加灵活地编写代码,但同时也需要注意使用它的场景和调用方式。 ### 回答3: JavaScript中的this关键字是一个非常重要的概念,它用于访问当前对象的上下文。它代表执行当前方法的对象。当我们在JavaScript中编写代码时,this关键字的上下文可以是全局对象,当前对象、任意对象或函数的作用域。 当我们在全局范围内使用this时,它将指向浏览器窗口或全局对象。而在对象里,this关键字则代表该对象。例如,如果我们在一个名为person的对象中使用this,它将返回person对象: ``` const person = { name: 'Tom', age: 30, greet() { console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`); } }; person.greet(); // 输出'Hello, my name is Tom and I am 30 years old.' ``` 当我们在函数内部使用this时,它可能会与预期的结果不同。在函数内部,this关键字通常为undefined。这是因为在JavaScript中,函数是一等对象,可以作为参数传递,并且可以按照不同的方式调用。因此,this关键字的上下文取决于如何调用该函数。 一种解决这个问题的方法是使用箭头函数。箭头函数的this关键字始终指向定义该函数的作用域: ``` const person = { name: 'Tom', age: 30, greet() { const sayHello = () => { console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`); } sayHello(); } }; person.greet(); // 输出'Hello, my name is Tom and I am 30 years old.' ``` 在这个例子中,箭头函数中的this关键字始终指向person对象。通过使用箭头函数,我们可以避免错误的this关键字上下文,并确保我们能够正确地访问对象的属性和方法。 总之,JavaScript中的this关键字非常重要,可以帮助我们访问当前对象的上下文。在函数内部使用时需要谨慎,可以考虑使用箭头函数来避免错误的上下文。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值