Js函数作用域、执行环境(this)、call、apply、bind 的用法

更新日期: 2019-05-15阅读: 1.8k标签: this

什么是函数的作用域

函数作用域:在 JavaScript 中,作用域为可访问变量,对象,函数的集合。JavaScript 函数作用域: 作用域在函数内修改。


this 与函数又有什么关系呢?

this对象是在运行时基于函数的执行环境绑定的。比如:在全局函数中,this 等同于 window 或者 global,而当函数被作为方法调用时,this 等于那个对象。特别需要注意的是在执行诸如:setInterval、setTimeout 等函数的回调时,此时的 this 其实是指向全局 window 的,因为类似这样的方法其实是 window 的属性方法。所以我们经常会看到类似下面的代码

var a = {
    age: 21,
    addAge: function() {
        var that = this
        setInterval(function() {
            that.age += 1
        }, 1000)
    }


那我们想改变函数执行时绑定的 this 怎么办呢?

call、apply、bind 可以用来干这个事情,哈哈~


call、apply 的用法:

每个函数都有两个非继承而来的方法: apply ( ) 和 call ( )。这两个方法的用途都是在特定的作用域中调用函数,实际上就是用来设置函数体内的 this对象 的值。两个方法的作用是相同的,唯一的区别是接收参数的方式不一样。两个方法的第一个参数是接收一个对象或者 null,区别是 apply 接收两个参数,第二个参数可以是 数组或者类数组的对象(arguments)这样。ES6 的 Set 实例也可以。call 方法就比较厉害了,它接收多个参数,除第一个对象参数外,其余的参数要一个一个列出来。

function sum(num1, num2) {
    return num1 + num2
}
sum.apply(this, [1, 2]) // 3
sum.call(this, 1, 2) // 3

其实,call 和 apply 方法的强大在于,能扩充函数运行的运用域:

var color = 'yellow'
var obj = {
    color: 'blue'
}
function checkColor () {
    console.log(this.color)
}
checkColor() // yellow
checkColor.call(this) // yellow
checkColor.call(window) // yellow,此处 this === window
checkColor.call(obj) // blue


那 bind 可以用来干点啥好事儿呢?

ES 5 为函数定义了一个 bind 方法。这个方法会创建一个函数的实例,实例执行时的 this 值会被绑定到传给 bind ( ) 函数的值。举个:

var color = 'yellow'
var obj = {
    color: 'blue'
}
function checkColor () {
    console.log(this.color)
}
checkColor.bind(obj)() // blue

它的实现原理也比较简单,类似于下面这样:

function bind(fn, context) {
    return function() {
        return fn.apply(context, arguments)
    }
}

链接: https://www.fly63.com/article/detial/3328

解读Javascript中的this机制,别再为了 this 发愁了

JavaScript中有很多令人困惑的地方,或者叫做机制。但是,就是这些东西让JavaScript显得那么美好而与众不同。比方说函数也是对象、闭包、原型链继承等等,而这其中就包括颇让人费解的this机制。

js中this的详细解释,JavaScript中this绑定规则【你不知道的JavaScript】

this的绑定过程之前的调用栈 和 调用位置,this绑定规则:1、默认模式,2、隐式绑定,3、显式绑定,4、new绑定

JavaScript中this的运行机制及爬坑指南

在 JavaScript 中,this 这个特殊的变量是相对比较复杂的,因为 this 不仅仅用在面向对象环境中,在其他任何地方也是可用的。 本篇博文中会解释 this 是如何工作的以及使用中可能导致问题的地方,最后奉上最佳实践。

JS中this的指向问题(全)

this关键字在js中的指向问题不管是工作还是面试中都会经常遇到,所以在此对它进行一下总结:全局作用域中、闭包中指window、函数调用模式:谁调用就指谁、构造函数中,this指实例对象、apply/call改变this的指向、bind改变this指向等

彻底淘汰并消除JavaScript中的this

如果这很难明白,为什么我们不停止使用它呢?认真的思考一下?如果你读过 将90%的垃圾扔进垃圾桶后,我如何重新发现对JavaScript的爱, 当我说扔掉它时,你不会感到惊讶,this被丢弃了

JavaScript this常见指向问题

this的用法:直接在函数中使用 谁调用这个函数this就指向谁 ,对象中使用, 一般情况下指向该对象 ,在构造函数中使用

JavaScript函数中this的四种绑定策略

this的四种绑定策略:默认绑定、隐式绑定、显示绑定、new绑定。首先要明确的是一般情况下,this不是函数被定义时绑定,而是函数被调用时被绑定 ,那么函数中的this有四种绑定方式:

改变this的指向

this是Javascript语言的一个关键字。它代表函数运行时,自动生成的一个内部对象.this永远指向函数的调用者。随着函数使用场合的不同,this的值会发生变化。但是有一个总的原则,那就是this指的是,调用函数的那个对象。

js手写实现apply,call,bind

apply和call的区别就是传的参数形式不一样。call是一个一个的传,apply可以将参数以数组的形式传进去。而bind是传入第二个和后面的参数,且绑定this,返回一个转化后的函数。

this指向问题的经典场景

以函数形式调用,this指向window;以方法形式调用,this指向调用方法的那个对象;构造函数调用,this指向实例的对象;使用window对象的方法使,指向window;多重场景改变this指向

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!