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

1fe1se 发布于2019-08-26 13:47 / 3069人阅读

摘要：什么是函数的作用域函数作用域在中，作用域为可访问变量，对象，函数的集合。函数作用域作用域在函数内修改。与函数又有什么关系呢对象是在运行时基于函数的执行环境绑定的。

什么是函数的作用域

函数作用域：在 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 ( ) 函数的值。举个

GPU云服务器云服务器 JS中bind、call和apply的作 this作用域 javascript_bind用法 apply与call的区别

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109541.html

javascript基础之this

摘要：出现箭头函数的时候，指向为定义时的上下文对象而非指向时，并且不能被改变首先我们先看一个例子由上面的例子我们可以看出来此时指针在用改变了之后指向的依然是全局对象非严格浏览器环境中是而非。 javascript基础之this指针越往后面学越发现基础的重要性，所以打算重新过一遍基础，之后出几个vue和react的实战教程。ok，严归正传。首先什么是this this是执行上下文创建时确定...

Zoom 2019-08-22 13:57 评论0 收藏0
前端_JavaScript_面向对象编程

摘要：面向对象编程对象的原生方法分成两类自身的方法静态方法和的实例方法。的静态方法方法与，参数是对象，返回一个数组，数组的值是改对象自身的所有属性名区别在于返回可枚举的属性，返回不可枚举的属性值。面向对象编程 Objects对象的原生方法分成两类：Object自身的方法(静态方法)和Object的实例方法。注意Object是JavaScript的原生对象，所有的其他对象都是继承自Objec...

Blackjun 2019-08-23 15:15 评论0 收藏0
Know this, use this! (总结 this 的常见用法)

摘要：而当做普通函数调用的话，实际上即第种情况下，对函数普通调用，此时的指向这是正常情况下，会正确返回并且指向该对象，但是在构造函数当中，如果返回了一个对象，那么会指向返回的那个对象。 this应该是一个讨论了很久的话题了。其中，关于this的文章，在很多的博客当中也有很多介绍，但是，以前我都是一知半解的去了解它，就是看博客当中，只介绍了一些情况下的 this 的使用方式，但是也并没有自己去...

zorro 2019-08-21 14:21 评论0 收藏0
this学习笔记

摘要：但是有一个总的原则，那就是指的是，调用函数的那个对象作为函数调用在函数被直接调用时绑定到全局对象。这一过程分为三步创建类的实例。这步是把一个空的对象的属性设置为。函数被传入参数并调用，关键字被设定为该实例。 this 的值到底是什么？一次说清楚你怎么还没搞懂 this？this、apply、call、bind 一、Whats this? 由于运行期绑定的特性，JavaScript 中的...

nanfeiyan 2019-08-23 14:32 评论0 收藏0
js函数this理解？手写apply、call、bind就够了

摘要：一是什么函数的内部属性，引用的是函数据以执行的环境对象。函数做为节点事件调用时指向节点本身做为构造函数实力化方法时指向实例对象箭头函数里的普通函数，由于闭包函数是执行的，所以指向箭头函数的指向函数创建时的作用域。一、this是什么？函数的内部属性，this引用的是函数据以执行的环境对象。也就是说函数的this会指向调用函数的执行环境。 function a(){ retur...

Cciradih 2019-08-26 10:39 评论0 收藏0