JavaScript学习(2)call&apply&bind&eval用法
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用法的更多相关文章
- Learning JavaScript with MDN (call, apply, bind)
Learning JavaScript with MDN (call, apply, bind) call, apply, bind Object.prototype.toString() 检测 js ...
- javascript中call,apply,bind的用法对比分析
这篇文章主要给大家对比分析了javascript中call,apply,bind三个函数的用法,非常的详细,这里推荐给小伙伴们. 关于call,apply,bind这三个函数的用法,是学习java ...
- call,apply,bind的用法
关于call,apply,bind这三个函数的用法,是学习javascript这门语言无法越过的知识点.下边我就来好好总结一下它们三者各自的用法,及常见的应用场景. 首先看call这个函数,可以理解成 ...
- 别真以为JavaScript中func.call/apply/bind是万能的!
自从学会call/apply/bind这三个方法后我就各种场合各种使用各种得心应手至今还没踩过什么坑,怎么用?说直白点就是我自己的对象没有某个方法但别人有,我就可以通过call/apply/bind去 ...
- javascript中的call(),apply(),bind()方法的区别
之前一直迷惑,记不住call(),apply(),bind()的区别.不知道如何使用,一直处于懵懂的状态.直到有一天面试被问到了这三个方法的区别,所以觉得很有必要总结一下. 如果有不全面的地方,后续再 ...
- 深入浅出:了解JavaScript中的call,apply,bind的差别
在 javascript之 this 关键字详解文章中,谈及了如下内容,做一个简单的回顾: 1.this对象的涵义就是指向当前对象中的属性和方法. 2.this指向的可变 ...
- ES5-call,apply,bind的用法
区别bind()与call()和apply()? 1. Function.prototype.bind(obj) : * 作用: 将函数内的this绑定为obj, 并将函数返回2. 面试题: 区别bi ...
- Javascript学习总结三(Array对象的用法)
javascript Array对象的常用API 1:concat concat() 方法用于连接两个或多个数组.该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本.举例:var a1 = [ ...
- JavaScript学习总结二(Date对象的用法)
javascript Date对象的常用API 1:创建日期 Date 对象用于处理日期和时间. 可以通过 new 关键词来定义 Date 对象.以下代码定义了名为 myDate 的 Date 对象: ...
随机推荐
- Day19 网络编程
基本概念 网络:一组由网线连接起来的计算机. 网络的作用: 1.信息共享. 2.信息传输. 3.分布式处理. 4.综合性的处理. internet:互联网 Internet:是互联网中最大的一个. w ...
- 看完了红米5 Plus发布会,我觉得魅蓝Note6降价降多了
没有意外,红米5 Plus在今天下午已经发布.这款以全面屏为卖点的手机机,将红米最低端的一个系列加价到了999元起步——这一切只是因为一个全面屏而已. 知道了红米5 Plus的售价之后,李楠大呼“降多 ...
- 我的linux shell 脚本头部
#!/bin/bash #################################################### # version:1.01 # # link:http://www. ...
- 罗技 HTPC K700
1.下方的 播放,暂停 快进 可以控制midea 2.CTRL+ALT+FN+(PG UP)可开启触控板左键点击功能3.FN(功能键)+左键=右键功能
- undefined reference to `sqrt'的问题
主要问题是math.h这个头文件虽然在/lib/include 下有定义,但是该文件内并没有sqrt()的定义.解决的办法是:在编译的时候在后面加上-lm,意思是链接到math函数库. 在gcc下用到 ...
- Node学习笔记之模块实现
一.模块分类 由Node提供的模块,称为核心模块:部分核心模块在Node源代码的编译过程中,编译进了二进制执行文件.在node进程启动时,该部分就直接加载进内存,文件定位和编译执行的步骤可以省略掉,并 ...
- #leetcode刷题之路46-全排列
给定一个没有重复数字的序列,返回其所有可能的全排列.示例:输入: [1,2,3]输出:[ [1,2,3], [1,3,2], [2,1,3], [2,3,1], [3,1,2], [3,2,1]] 两 ...
- linux 学习第十八天学习(DNS分离解析、DHCP配置、邮件服务配置)
DNS分离解析技术 yum install bind-chroot systemctl restart named systemctl enable named vim /etc/named.conf ...
- 跨域(Cross-Domain) AJAX for IE8 and IE9
1.有过这样一段代码,是ajax $.ajax({ url: "http://127.0.0.1:9001", type: "POST", data: JSON ...
- STM32 HAL库学习系列第1篇 ADC配置 及 DAC配置
ADC工作均为非阻塞状态 轮询模式 中断模式 DMA模式 库函数: HAL_StatusTypeDef HAL_ADC_Start(ADC_HandleTypeDef* hadc);//轮询模式,需放 ...