JavaScript中的this机制

171 阅读 0 评论 113 点赞

我是靠谱客的博主乐观黄蜂，最近开发中收集的这篇文章主要介绍JavaScript中的this机制，觉得挺不错的，现在分享给大家，希望可以做个参考。

JavaScript有自己的一套this机制，在不同情况下，this的指向也不尽相同。

全局范围

console.log(this); //全局变量

全局范围使用this指向的是全局变量，浏览器环境下就是window。

注：ECMAScript5的strict模式不存在全局变量，这里的this是undefined。

函数调用中

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

foo(); //全局变量

函数调用中的this也指向全局变量。

注：ECMAScript5的strict模式不存在全局变量，这里的this是undefined。

对象方法调用

var test = {
  foo: function () {
    console.log(this);
  }
}

test.foo(); //test对象

对象方法调用中，this指向调用者。

var test = {
  foo: function () {
    console.log(this);
  }
}

var test2 = test.foo;
test2(); //全局变量

不过由于this的晚绑定特性，在上例的情况中this将指向全局变量，相当于直接调用函数。

这点非常重要，同样的代码段，只有在运行时才能确定this指向

构造函数

function Foo() {
  console.log(this);
}

new Foo(); //新创建的对象
console.log(foo);

在构造函数内部，this指向新创建的对象。

显式设置this

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

var bar = {};

foo.apply(bar, [1, 2]); //bar
foo.call(1, 2); //Number对象

使用Function.prototype的call或者apply方法是，函数内部this会被设置为传入的第一个参数。

以上就是乐观黄蜂为你收集整理的JavaScript中的this机制的全部内容，希望文章能够帮你解决JavaScript中的this机制所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。