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&bind&eval用法的更多相关文章

  1. Learning JavaScript with MDN (call, apply, bind)

    Learning JavaScript with MDN (call, apply, bind) call, apply, bind Object.prototype.toString() 检测 js ...

  2. javascript中call,apply,bind的用法对比分析

    这篇文章主要给大家对比分析了javascript中call,apply,bind三个函数的用法,非常的详细,这里推荐给小伙伴们.   关于call,apply,bind这三个函数的用法,是学习java ...

  3. call,apply,bind的用法

    关于call,apply,bind这三个函数的用法,是学习javascript这门语言无法越过的知识点.下边我就来好好总结一下它们三者各自的用法,及常见的应用场景. 首先看call这个函数,可以理解成 ...

  4. 别真以为JavaScript中func.call/apply/bind是万能的!

    自从学会call/apply/bind这三个方法后我就各种场合各种使用各种得心应手至今还没踩过什么坑,怎么用?说直白点就是我自己的对象没有某个方法但别人有,我就可以通过call/apply/bind去 ...

  5. javascript中的call(),apply(),bind()方法的区别

    之前一直迷惑,记不住call(),apply(),bind()的区别.不知道如何使用,一直处于懵懂的状态.直到有一天面试被问到了这三个方法的区别,所以觉得很有必要总结一下. 如果有不全面的地方,后续再 ...

  6. 深入浅出:了解JavaScript中的call,apply,bind的差别

     在 javascript之 this 关键字详解文章中,谈及了如下内容,做一个简单的回顾:         1.this对象的涵义就是指向当前对象中的属性和方法.       2.this指向的可变 ...

  7. ES5-call,apply,bind的用法

    区别bind()与call()和apply()? 1. Function.prototype.bind(obj) : * 作用: 将函数内的this绑定为obj, 并将函数返回2. 面试题: 区别bi ...

  8. Javascript学习总结三(Array对象的用法)

    javascript Array对象的常用API 1:concat concat() 方法用于连接两个或多个数组.该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本.举例:var a1 = [ ...

  9. JavaScript学习总结二(Date对象的用法)

    javascript Date对象的常用API 1:创建日期 Date 对象用于处理日期和时间. 可以通过 new 关键词来定义 Date 对象.以下代码定义了名为 myDate 的 Date 对象: ...

随机推荐

  1. HBase学习之路 (七)HBase 原理

    系统架构 错误图解 这张图是有一个错误点:应该是每一个 RegionServer 就只有一个 HLog,而不是一个 Region 有一个 HLog. 正确图解 从HBase的架构图上可以看出,HBas ...

  2. [IDE123] Intellij Idea 快捷键

    Ctrl+Shift+N,可以快速打开文件 Ctrl+Shift + Enter,语句完成“!”,否定完成,输入表达式时按 “!”键Ctrl+E,最近的文件Ctrl+Shift+E,最近更改的文件Sh ...

  3. virtualbox+vagrant学习-2(command cli)-12-vagrant Provision命令

    Provision 格式: vagrant provision [vm-name] [--provision-with x,y,z] 针对正在运行的vagrant托管计算机运行任何配置预配置程序. u ...

  4. 【转】Python数据处理(四舍五入、除法部分)

    转自:https://www.cnblogs.com/junyiningyuan/p/5338378.html 关于除法 传统除法 对两个整数进行除的运算,同时结果会舍去小数部分,返回一个整数.但如果 ...

  5. 【css】css实现点击Toggle功能/icon切换

    ①实现Toggle功能 html结构: <div class="cssTog"><label> <p> 专业:B020309现代企业管理(独立本 ...

  6. Linux进程管理——fork()和写时复制

    写时复制技术最初产生于Unix系统,用于实现一种傻瓜式的进程创建:当发出fork(  )系统调用时,内核原样复制父进程的整个地址空间并把复制的那一份分配给子进程.这种行为是非常耗时的,因为它需要: · ...

  7. 如何使用cubemx 配置freertos,实时查看FreeRTOS任务列表和运行状态

    ---------------------------------------------------------------------------------------------------- ...

  8. react中手动重置redux

    前段时间使用redux在react-native中,安卓后退两次关闭后redux未清空的问题,一直觉得处理的不够优雅,没有根本解决问题. 后来发现再退出登录后,也有部分数据因为redux的逻辑处理数据 ...

  9. 20155327Exp6 信息搜集与漏洞扫描

    20155327Exp6 信息搜集与漏洞扫描 实验过程 一.信息搜集 whois 在kali终端输入whois 网址,查看注册的公司.服务.注册省份.传真.电话等信息. dig或nslookup域名查 ...

  10. jQuery学习-尺寸坐标

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...