zoukankan      html  css  js  c++  java
  • this 知多少

    js 中的this 到底指向哪里涅,学习js的过程中,肯定有不少小伙伴们调入this的大坑中,究其原因,this的指向在函数创建的时候是决定不了的,在调用的时候才能决定,谁调用的就指向谁。。。曾经,我也被this虐的不要不要的,然鹅this虐我千百遍,我待this如初恋,今天本骚年就以拙劣的文笔试着把this说清楚,老规矩,show you the code:

    var app = {
        fn1: function () {
            console.log('fn1->', this)
        },   //对象的方法,套路1
        fn2: function () {
            return function () {
                console.log('fn2->', this)
            }
        },   //匿名函数,套路2
        fn3: function () {
            function fn() {
                console.log('fn3->', this)
            }
            fn()
        },   //普通函数,套路2
        fn4: function () {
            return {
                fn: function () {
                    console.log('fn4->', this)
                }
            }
        },   //对象内部方法,套路1
        fn5() {
            setTimeout(function () {
                console.log('fn5->', this)
            }, 10)
        },  //匿名函数内部,套路2
        fn6() {
            setTimeout(() => {
                console.log('fn6->', this)
            }, 20)
        },  //箭头函数 指向fn6的作用域,this是app,套路4
        fn7() {
            setTimeout((function () {
                console.log('fn7->', this)
            }).bind(this), 30)
        },  //bind 方法绑定this 是app,套路5
        fn8: () => {
            setTimeout(() => {
                console.log('fn8->', this)
            }, 40)
        }  //箭头函数,所以this突破对象app,全局对象this指向window,套路4
    }

    以下是this的一些套路:

    1.对象内部方法的this指向调用这些方法的对象

    2.普通函数和匿名函数内部,this指向window

    3.构造函数中的this与被创建的新对象绑定。(本例用不到)

    4. 箭头函数指向函数所在的所用域: 注意理解作用域,只有函数的{}构成作用域,对象的{}以及 if(){}都不构成作用域;(这很关键) ,或者这样理解,箭头函数其实是没有 this 的,这个函数中的 this 只取决于他外面的第一个不是箭头函数的函数的 this。

    5.通过bind方法绑定后, 函数将被永远绑定在其第一个参数对象上, 而无论其在什么情况下被调用

  • 相关阅读:
    40个你可能不知道的Python的特点和技巧
    Python Streaming实战2: Join的实现与数据过滤
    python + Streaming框架的MR实践与优化
    python编码最佳实践之总结
    Python自然语言处理系列之模拟退火算法
    Python自然语言处理
    机器学习实践中的 7 种常见错误
    玩转python主题模型程序库gensim
    Python自然语言处理
    glusterfs
  • 原文地址:https://www.cnblogs.com/renbo/p/9307940.html
Copyright © 2011-2022 走看看