JavaScript学习(2)call&apply&bind&eval用法

时间：2022-07-12 18:37:55

javascript学习(2)call&apply&bind&eval用法

在javascript中存在这样几种特别有用的函数，能方便我们实现各种奇技淫巧。其中，call、bind、apply能改变函数运行时的上下文，或者说动态改变函数内部的this指向的作用，这就给我们使用时提供了极大的灵活性。而eval可以将传入的字符串当作JavaScript代码执行。本文，简单的介绍下其中的用法。

1. call

含义：
Function.prototype.call()
可知它是Function原型的一个方法，它本身会调用另外一个函数，并接收指定的this值和参数列表。也可以理解为，call()方法中接收的对象调用当前对象所拥有的函数，而返回值则是该调用方法的返回值。

用法：

fun.call(thisObj, arg1, arg2, ...)

以上，会将fun的上下文对象this修改为thisObj，并将可选参数arg1，arg2等当作参数传递给fun函数。

示例：

var student = {
    name: "张三",
    age: 18,
    getInfo: function(desc) {
        console.log(desc + "," + this.name + "," + this.age);
    }
}

var xiaoming = {
    name: "小明",
    age: 20,
}

student.getInfo.call(xiaoming);       // welcome,小明,20

2. apply

Function.prototype.apply()
应该说apply方法跟call方法的作用类似，只是apply接收的参数是指定的this值和一个包含多个参数的数组作为参数列表，而call是接受若干个参数的列表。

用法：

fun.apply(thisObj, [argsArray])

注意，argsArray是一个数组或者类数组对象。

示例：

var student = {
    name: "张三",
    age: 18,
    getInfo: function(desc) {
        console.log(desc + "," + this.name + "," + this.age);
    }
}

var xiaoming = {
    name: "小明",
    age: 20,
}

student.getInfo.apply(xiaoming, ["welcome"]);    //welcome,小明,20

3. bind

Function.prototype.bind()
bind方法会创建一个新的函数，并将原函数this的值绑定为当前指定的对象，返回由指定this值和初始化参数的原函数的拷贝。

用法：

fun.bind(thisObj[, arg1[, arg2[, ...]]])

即：将fun函数的this值指定为thisObj，并将参数列表arg1，arg2等传递给该函数所创建的一个新的函数。

示例：

var student = {
    name: "张三",
    age: 18,
    getInfo: function(desc) {
        console.log(desc + "," + this.name + "," + this.age);
    }
}

var xiaoming = {
    name: "小明",
    age: 20,
}

var getInfo2 = student.getInfo.bind(xiaoming, "welcome");
getInfo2();                 // welcome,小明,20
console.log(getInfo2);      // [Function: bound getInfo]

4. eval

eval()函数，是全局对象的一个函数属性。该函数接受一个字符串参数，并会当作javascript代码来执行，如果接受的不是字符串参数，则原样返回。

用法：

eval(string)

示例：

console.log(eval("new Date()"));    // 2017-12-09T08:45:23.759Z
console.log(eval(false));           // false

以上几个是日常开发可能会用到的高级用法，但不限于这些，这里只是也做了简单的介绍，主要是促进对javascript的使用与理解，更多后续的使用会陆续更新。

标签：

相关文章