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. Day7 Tomcat和servlet

    web服务器 1)        什么是web服务器 硬件:性能强大的计算机(无显示屏) 操作系统: linux 软件:web服务器软件(将数据放置在服务器上就可以被外部访问) web应用程序 2)  ...

  2. Docker实战(九)之数据库应用

    目前,主流数据库包括关系型和非关系型两种. 关系型数据库是建立在关系模型基础上的数据库,借助于集合代数等数学概念金额方法来处理数据库中的数据,支持复杂的事务处理和结构化查询.代表实现有MySQL .O ...

  3. saltstack之sls文件配置

    state模块 state模块会调用它的sls函数处理一个以.sls结尾的配置文件. sls文件是YAML语言来进行描述的 缩进 不要使用`tab`因为tab是四个空格,而YAML是使用两个空格 冒号 ...

  4. 初识Qt鼠标、键盘事件及定时器和随机数

    1.新建Qt Gui应用,项目名称为“myEvent”,基类名称为QWidget,类名称为Widget. 2.widget.h文件中添加以下代码,该段代码中包含了三个事件函数和一个槽函数 privat ...

  5. USB耳机声卡-音频输入/输出控制器:DP108替代兼容CM108

    DP108是一款完全替代CM108的高度集成的单芯片USB音频解决方案芯片.方便的USB即插即用的兼容性,用户可以快速创建易用性,高质量和便携式USB音频产品基于高度集成的单芯片解决方案.所有重要的模 ...

  6. scp 指定端口(转)

    1.注意-P 大写 2.实例 从服务器下载 scp -P 26399 root@104.222.133.88:/home/wwwroot/default/phpmyadmin/save/wordpre ...

  7. React-Native项目中使用Redux

    前言 网上别人的文档都是 直接 就是上redux redux-thunk react-redux ,immutable这样的一套,这个有经验的看还行,新手看就很吃力了,需要了解一步一步的安装redux ...

  8. Wifi NAT Driver

    最近遇点奇葩问题,最开始以为被种马了经检测发现不是,分享下以后大家出现类似也好解决:同时列出尝试过程以便大家以后自行排除自己网络问题: 症状: 网络连接右下角图标显示为网卡无线网卡和有线均禁用状态,查 ...

  9. 2017-2018-1 20155317 《信息安全系统设计基础》课堂实践——实现mypwd

    2017-2018-1 20155317 <信息安全系统设计基础>课堂实践——实现mypwd 1 . 学习使用pwd 很显然pwd命令的意思是打印出该文件当前的绝对路径 2 . 了解pwd ...

  10. Deep Learning Tutorial 李宏毅(一)深度学习介绍

    大纲 深度学习介绍 深度学习训练的技巧 神经网络的变体 展望 深度学习介绍 深度学习介绍 深度学习属于机器学习的一种.介绍深度学习之前,我们先大致了解一下机器学习. 机器学习,拿监督学习为例,其本质上 ...