美文网首页AlphaGL的游戏开发之旅
JavaScript学习(2)call&apply&am

JavaScript学习(2)call&apply&am

作者: AlphaGL | 来源:发表于2017-12-09 16:52 被阅读3次

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的使用与理解,更多后续的使用会陆续更新。

相关文章

  • JavaScript学习(2)call&apply&am

    javascript学习(2)call&apply&bind&eval用法 在javascript中存在这样几种特...

  • 046|JavaScript函数的call&apply

    前面的课程中讲解了两种情况下的函数this指向,全局this和成员方法this都是属于被动this,即默认设置的。...

  • JavaScript学习教程

    学习教程: 1. JavaScript教程 2.JavaScript 教程 | 菜鸟教程 3.JavaScript...

  • 深入 JavaScript 之 call&bind&am

    call bind apply call 先给一个官方描述吧: call() 方法调用一个函数, 其具有一个指定的...

  • JavaScript(Day01)

    1、JavaScript是什么? 是用来实现页面动态效果的脚本语言 2、JavaScript要学习的内容是什么 2...

  • JavaScript学习笔记2

    THTML DOM(文档对象模型) JavaScript 能够改变页面中的所有 HTML 元素,能够改变页面中的所...

  • 学习JavaScript详解(2)

    1. 操作符优先级 算术操作符 → 比较操作符 → 逻辑操作符 → "="赋值符号 2. 创建数组 3. 二维数组...

  • JavaScript 学习 (2) -- 数组

    对象 (Object) 创建Object实例的方式有两种: 使用new操作符后跟Object构造函数 使用对象字面...

  • JavaScript学习2 this指向

    一、问题的由来 学懂 JavaScript 语言,一个标志就是理解下面两种写法,可能有不一样的结果。 var ob...

  • JavaScript学习笔记<2>

    3 函数 3.1 定义和调用函数 函数定义(又称函数声明、函数语句)形如function name(paramet...

网友评论

    本文标题:JavaScript学习(2)call&apply&am

    本文链接:https://www.haomeiwen.com/subject/liqpixtx.html