JavaScript中的this规则及this对象用法实例

规则

1、如果在调用函数时使用 new 关键字，那么函数里的 this 就是一个全新的对象。

function ConstructorExample() {
  console.log(this);
  this.value = 10;
  console.log(this);
}
new ConstructorExample();
// -> {}
// -> { value: 10 }

2、如果使用 apply、call 或者 bind 调用函数，那么函数里的 this 就是作为参数传进去的对象。

function fn() {
  console.log(this);
}
var obj = {
  value: 5
};
var boundFn = fn.bind(obj);
boundFn();   // -> { value: 5 }
fn.call(obj); // -> { value: 5 }
fn.apply(obj); // -> { value: 5 }

3、如果函数作为一个方法调用，就是说如果使用点符号调用函数，那么 this 就是拥有这个函数作为属性的对象。换句话说，当一个点在函数调用的左侧时，this 就是这个点左侧的那个对象。

var obj = {
  value: 5,
  printThis: function() {
    console.log(this);
  }
};
obj.printThis(); // -> { value: 5, printThis: ƒ }

4、如果函数作为一个纯粹的函数调用，也就是说，它在没有上述任何条件的情况下被调用，那么 this 就是全局对象。在浏览器里，就是 window 对象。

function fn() {
  console.log(this);
}
// 如果在浏览器里调用：
fn(); // -> Window {stop: ƒ, open: ƒ, alert: ƒ, ...}

注意这个规则其实和第三个规则是一样的，区别在于没有声明为方法的函数会自动成为全局对象 window 的属性。因此，这其实是一个隐式的方法调用。当我们调用 fn()，其实就会被浏览器理解为 window.fn()，所以 this 就是 window。

console.log(fn === window.fn); // -> true

5、如果上述规则有多个适用，那么优先级更高的就会设置 this 值。

6、如果是 ES2015 里的箭头函数，那么它将忽略上述所有规则，并在创建的时候接收包含它的作用域作为 this 的值。想确定 this 具体是什么的话，只需从创建箭头函数那里往上一行，看看那儿的 this 是什么，箭头函数里的 this 值和它一样。

const obj = {
  value: 'abc',
  createArrowFn: function() {
    return () => console.log(this);
  }
};
const arrowFn = obj.createArrowFn();
arrowFn(); // -> { value: 'abc', createArrowFn: ƒ }

看回第三个规则，当我们调用 obj.createArrowFn() 的时候，createArrowFn 里的 this 是 obj，因为这是方法调用。因此，obj 会在 arrowFn 里绑定到 this 上。如果我们在全局作用域创建一个箭头函数，那么 this 值就会是 window。

应用规则

让我们来看一个代码示例，并应用这些规则。尝试一下看能否弄清楚不同的函数调用下，this 是什么。

确定应用了哪条规则

var obj = {
  value: 'hi',
  printThis: function() {
    console.log(this);
  }
};
var print = obj.printThis;
obj.printThis(); // -> {value: "hi", printThis: ƒ}
print(); // -> Window {stop: ƒ, open: ƒ, alert: ƒ, ...}

obj.printThis() 属于第三条规则，方法调用。另一方面，print() 属于第四条规则，纯粹的函数调用。对于 print() 来说，我们在调用的时候没有使用 new、bind/call/apply 或者点符号，所以它对应了规则四，this 就是全局对象 window。

当适用多个规则的时候

当适用多个规则的时候，使用列表里更高优先级的规则。

var obj1 = {
  value: 'hi',
  print: function() {
    console.log(this);
  },
};
var obj2 = { value: 17 };

如果规则二和规则三同时适用，那么规则二占优。

obj1.print.call(obj2); // -> { value: 17 }

如果规则一和规则三同时适用，那么规则一占优。

new obj1.print(); // -> {}

库

有些库有时候会故意将 this 值绑定到某些函数里。而通常会在函数里将最有用的值绑定到 this 上使用。举个例子，jQuery 把 this 绑定到 DOM 元素上，在回调中触发一个事件。如果某个库出现一个不太符合上述规则的 this 值，那么请仔细阅读这个库的文档，它很有可能使用 bind 绑定了。

this对象是在函数运行时，基于函数的执行环境绑定的。下面和大家介绍js中this对象用法的详细分析，其实这句话的本质就是，谁调用了函数，this就指向谁

具体的来说，通常有以下几种情况：

全局函数

在全局环境中，this指向Window

   
//例子1
 function A() {
 console.log(this)
 }
 A();//Window

上面的例子很简单，函数A在全局环境中执行，也就是全局对象Window调用了函数。此时this指向Window

对象方法

作为对象方法调用时，this指向调用该方法的对象

//例子2
var b = {
 getThis:function(){
  console.log(this)
 }
}
b.getThis()//b

到这里我们举的例子都比较简单易懂，接下来来一个有意思的：

//例子3
 var c = {
 getFunc:function(){
  return function(){
  console.log(this)
  }
 }
 }
 var cFun = c.getFunc()
 cFun()//Window

这个例子和前一个例子不一样，运行c.getFunc()时，首先返回的是一个匿名函数，我们将这个函数赋值给cFun，接着在全局环境中调用了cFun()，所以此时this指向的还是Window。

如果我们一定要让这里返回的是c对象呢？在开头我们说过，this对象是在函数执行时确定的，在例子3中，执行c.getFunc()时，this对象指向的还是c，所以我们只要保持住这个this就好了,对上面的代码稍微改动：

   
//例子4
 var c = {
 getFunc:function(){
  var that = this //在这里保留住this
  return function(){
  console.log(that)
  }
 }
 }
 var cFun = c.getFunc()
 cFun()//c

这也就是我们经常可以在一些代码中看到var self = this或者var that = this之类的原因了。

call和apply

此时this对象通常指向函数中指定的this值(注意这里的通常2字，考试要考的)

call和apply算是老生常谈，但还是稍微介绍下，怕新同学可能没接触过（其实是为了凑点字数），拿call来说，语法是这样的

fun.call(thisArg, arg1, arg2, ...)

这个方法怎么用呢，看下面的例子：

//例子5
var d = {
 getThis:function(){
  console.log(this)
 }
}
var e = {
 name:'e'//(给e写个`name`属性只是因为觉得孤零零的太难看了~~)
}
d.getThis.call(e)//e

在这里我们就可以看出call函数的意思了:指定一个对象o1去调用其他对象o2的方法，此时this对象指向o1

好了，那为什么前面我们说通常呢？因为，这里的thisArg是可以指定为null和undefined的。请看：

   
//例子6
var d = {
 getThis:function(){
  console.log(this)
 }
}
 d.getThis.call(null)//Window
 d.getThis.call(undefined)//Window

此时的this指向全局对象Window

箭头函数

es6中的箭头函数现在也用的比较频繁，但是有个需要注意的点是：

函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

其实出现这种情况的根本原因是:箭头函数没有this对象，所以箭头函数的this就是外层代码的this

//例子7
 var f = {
  getThis:()=>{
   console.log(this)
  }
 }
 f.getThis()//Window

这个例子和前面例子2是基本一样的，只是把普通函数改写成箭头函数，但是此时的this对象已经指向了外层的Window。

考虑到这一点可能不好理解，我们再看几个例子:

   
//例子8
 var g = {
 getThis:function(){
  return function(){console.log(this)}
 }
 }
 var h = {
 getThis:function(){
  return ()=> console.log(this)
 }
 }
 g.getThis()()//Window
 h.getThis()()//h

这个例子里，g的getThis写法就和之前的例子3一样，由于函数在全局环境中运行，所以此时this指向Window；h的getThis使用了箭头函数，所以this指向了外层代码块的this所以，此时this指向的是h。

总结

一般情况下this对象指向调用函数的对象，全局环境中执行函数this对象指向Window

在call和apply函数中this指向指定的对象，如果指定的对为undefined或者null，那么this对象指向Window

在箭头函数中，this对象等同于外层代码块的this。

相关推荐：

JS中的this、apply、call、bind实例分享

函数调用的不同方式及this的指向详解

html的标签中的this应该如何使用

以上就是JavaScript中的this规则及this对象用法实例的详细内容，更多请关注Gxl网其它相关文章！