Javascript this关键字

Javascript this关键字
经常this使用上比较混乱,所以总结一下。
Javascript中的this其实跟java、C++等oo语言的含义,其实没有什么太大不同,但是由于javascript自身的特殊性,函数既是函数也是对象,导致this容易混淆。有人说this指的是,调用函数的那个对象。为了与其他oo语言的this概念统一一下,说this指向当前对象也没有什么不妥。
情况一:纯粹的函数调用:

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

test(); //这里对话框弹出内容为1
为了证明this就是全局对象,我对代码做一些改变:

var x = 1;
function test(){
alert(this.x);
}
test();//这里对话框弹出内容为1
var x = 1;
function test(){
  this.x = 0;
}
test();
alert(x); //这里对话框弹出内容为0而不是1

可见this此时为全局对象。这是因为此时调用test的对象为全局对象window,所以当前对象也就是this指向的对象为window

情况二:作为对象方法的调用
函数还可以作为某个对象的方法调用,这时this就指这个上级对象。

function test(){
    alert(this.x);
  }
  var o = {};
  o.x = 1;
  o.m = test;
o.m(); // 1

  
情况三 作为构造函数调用
所谓构造函数,就是通过这个函数生成一个新对象(object)。这时,this就指这个新对象。

function test(){
 this.x = 1;
}
var o = new test();
alert(o.x); // 1
运行结果为1。为了表明这时this不是全局对象,我对代码做一些改变:
var x = 2;
function test(){
 this.x = 1;
}
var o = new test();
alert(x); //2

运行结果为2,表明全局变量x的值根本没变。

情况四 作为字面量调用

var name='tt';
var test={
    name:'hh',
    tt:this.name
};
alert("name:"+test.tt);

运行结果是弹框内容为tt而不是hh。这种情况跟情况一类似

情况五 apply函数可以改变this的指向
apply()的参数为空时,默认调用全局对象

var x = 0;
function test(){
  alert(this.x);
}
var Q={};
Q.x = 1;
Q.m = test;
Q.m.apply(); //弹框内容为全局的x的0,而不是Q的x的1

若把最后一行改为Q.m.apply(Q);这句代码的意思是Q.m的this为Q,即此时test的this为Q,于是弹框内容为Q的x的1

  • 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、付费专栏及课程。

余额充值