搜索
写经验 领红包
 > 家居

this设计缺陷和应对方案的区别(this设计缺陷和应对方案的关系)

导语:this 设计缺陷和应对方案

this 设计缺陷和应对方案的区别(this 设计缺陷和应对方案的关系)

1 嵌套函数中的this 不会从外层函数中继承
var myObj = {
  myName: &34;, 
  showThis: function(){
    console.log(this.myName); // 输出啥?
    function bar(){
      console.log(this.myName); // 输出啥?
    }
    bar();
  },};myObj.showThis();

答案是:

jszhangundefined

解决方法一:通过 that 控制 this 指向

var myObj = {
  myName: &34;, 
  showThis: function(){
    console.log(this.myName); // 输出啥?
    let that = this;
    function bar(){
      console.log(that.myName); // 输出啥?
    }
    bar();
  },};myObj.showThis();

这样都输出 jszhang 了。

解决方法二:通过 ES6 的箭头函数解决问题

var myObj = {
  myName: &34;, 
  showThis: function(){
    console.log(this.myName); // 输出啥?
    const bar = () => {
      console.log(this.myName); // 输出啥?
    }
    bar();
  },};myObj.showThis();

这是因为 ES6 中的箭头函数并不会创建其自身的执行上下文,所以箭头函数中的 this 取决于它的外部函数,即谁调用它 this 就继承自谁。

2 普通函数中this 指向全局对象window

在实际工作中,我们并不希望函数执行上下文中的 this 默认指向全局对象,因为这样会打破数据的边界,造成一些误操作。

如果要让函数执行上下文中的 this 指向某个对象,最好的方式是通过 call 方法来显示调用。

这个问题可以通过设置 JavaScript 的 严格模式 来解决。在严格模式下,默认执行一个函数,其函数的执行上下文中的 this 值是 undefined,这就解决上面的问题了。

Webpack优化构建速度

web页面重构如何操作

web前端js框架有哪些

web前端JS基础高频面试题

javaweb中有关Ajax的面试题

本文内容由小思整理编辑!