JavaScript 中的 this 简单规则

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

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 }

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

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

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: "color: #ff0000">应用规则

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


var obj = {
  value: 'hi',
  printThis: function() {
    console.log(this);
  }
};
var print = obj.printThis;
obj.printThis(); // -> {value: "hi", printThis: "color: #ff0000">当适用多个规则的时候

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


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 绑定了。
总结
以上所述是小编给大家介绍的JavaScript 中的 this 简单规则，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

                                
                                

                                    js,this,规则 
                                

                                    标签：
                                        
js,this,规则