this 设计缺陷和应对方案

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

  • jszhang
  • undefined
  • 解决方法一:通过 that 控制 this 指向
    var myObj = {myName: &34;,showThis: function{console.log; // 输出啥?let that = this;function bar{console.log; // 输出啥?}bar;},};myObj.showThis;
    这样都输出 jszhang 了 。
    解决方法二:通过 ES6 的箭头函数解决问题
    var myObj = {myName: &34;,showThis: function{console.log; // 输出啥?const bar ==> {console.log; // 输出啥?}bar;},};myObj.showThis;
    这是因为 ES6 中的箭头函数并不会创建其自身的执行上下文,所以箭头函数中的 this 取决于它的外部函数,即谁调用它 this 就继承自谁 。
    2 普通函数中this 指向全局对象window
    在实际工作中 , 我们并不希望函数执行上下文中的 this 默认指向全局对象,因为这样会打破数据的边界,造成一些误操作 。
    如果要让函数执行上下文中的 this 指向某个对象,最好的方式是通过 call 方法来显示调用 。
    这个问题可以通过设置 JavaScript 的 严格模式 来解决 。在严格模式下 , 默认执行一个函数,其函数的执行上下文中的 this 值是 undefined,这就解决上面的问题了 。
    Webpack优化构建速度
    【this 设计缺陷和应对方案】web页面重构如何操作
    web前端js框架有哪些
    web前端JS基础高频面试题
    javaweb中有关Ajax的面试题
    以上就是朝夕生活(www.30zx.com)关于“this 设计缺陷和应对方案”的详细内容,希望对大家有所帮助!

    猜你喜欢