《JavaScript总结》apply、call和bind方法
在JavaScript中,apply、call、bind这个三个方法,它们的作用都是为了改变某个函数运行时的上下文,
也就是改变函数体内的this指向。
在一个函数里,存在“定义时上下文”、“运行时上下文”,而且上下文是可以改变的。
apply方法
apply方法接收两个参数,第一个参数是:“上下文对象” ,第二个参数是:“传入当前执行函数的参数”(第二个参数是数组)。
function test(){
console.log(this.name);
}
let one = {
name:'测试1'
}
let two = {
name:'测试2'
}
test.apply(one);//将one对象传入函数 这时test函数的上下文是one ,one的name等于'测试1' 所以输出 '测试1'
test.apply(two);//将two对象传入函数 这时test函数的上下文是two ,two的name等于'测试2' 所以输出 '测试2'
我们自己封装一个log函数,将传入的参数打印在控制台。
function log(){
var arr = Array.prototype.slice.apply(arguments);
console.log.apply(console,arr);
}
log(1,2,4);
call方法
call和apply作用都是一样的,唯一的不同点是第二个参数,apply的第二个参数是数组,而call的第二个参数的话,看下面例子:
var arr = [1,2,3];
Array.prototype.push.call(arr,6,7,8); //参数是一个一个传的
console.log(arr);//[1, 2, 3, 6, 7, 8]
bind方法
bind方法和apply、call的作用也是差不多的,不同的是 apply、call 这两个方法是立即执行函数,而bind不是,来看下面例子:
let one = {
name:'测试1'
}
let two = {
name:'测试2'
}
function sayName(){
console.log(this.name);
}
let play = sayName.bind(one); //这里并不会立即执行
play(); //所以 可以将这个方法 放到需要的地方 在执行
apply、call、bind这三者的区别
相同点:这个三个方法的作用都是改变函数执行上下文。
不同点:bind是返回对应的函数,便于稍后调用,apply、call方法则是立即执行(立即调用)
参考教程:https://www.cnblogs.com/moqiutao/p/7371988.html
《JavaScript总结》apply、call和bind方法的更多相关文章
- 彻底理解了call()方法,apply()方法和bind()方法
javascript中的每一个作用域中都有一个this对象,它代表的是调用函数的对象.在全局作用域中,this代表的是全局对象(在web浏览器中指的是window).如果包含this的函数是一个对象的 ...
- 浅析 JavaScript 中的 Function.prototype.bind() 方法
Function.prototype.bind()方法 bind() 方法的主要作用就是将函数绑定至某个对象,bind() 方法会创建一个函数,函数体内this对象的值会被绑定到传入bind() 函数 ...
- JavaScript 中的 Function.prototype.bind() 方法
转载自:https://www.cnblogs.com/zztt/p/4122352.html Function.prototype.bind()方法 bind() 方法的主要作用就是将函数绑定至某个 ...
- Javascript中this作用域以及bind方法的重写
这是一个最近遇到的笔试题,出于尊重,不会说出该公司的名字,源于自身比较少,笔试题是将bind方法用ES3重写,使用bind这个方法,导致一时半会懵了,只记得bind可以改变this的作用域. 作为查漏 ...
- JavaScript的apply()方法和call()方法
1 <script type="text/javascript"> 2 /*定义一个人类*/ 3 function Person(name,age) 4 { 5 thi ...
- JavaScript中apply与call方法
一.定义 apply:应用某一对象的一个方法,用另一个对象替换当前对象. call:调用一个对象的一个方法,以另一个对象替换当前对象. 二.apply //apply function Person( ...
- Javascript中call,apply,bind方法的详解与总结
在 javascript之 this 关键字详解 文章中,谈及了如下内容,做一个简单的回顾: 1.this对象的涵义就是指向当前对象中的属性和方法. 2.this指向的可变性.当在全局作用域时,thi ...
- javascript中函数的call,apply及bind方法
call 方法调用一个对象的一个方法,以另一个对象替换当前对象.call([thisObj[,arg1[, arg2[, [,.argN]]]]])参数thisObj可选项.将被用作当前对象的对象. ...
- javascript中apply、call和bind的区别及方法详解
文章目录 apply.call apply.call 区别 apply.call实例 数组之间追加 获取数组中的最大值和最小值 验证是否是数组(前提是toString()方法没有被重写过) 类(伪 ...
随机推荐
- 【翻译】Flume 1.8.0 User Guide(用户指南) Processors
翻译自官网flume1.8用户指南,原文地址:Flume 1.8.0 User Guide 篇幅限制,分为以下5篇: [翻译]Flume 1.8.0 User Guide(用户指南) [翻译]Flum ...
- MFC选择文件(夹)按钮实现
MFC选择文件(夹)按钮实现 选择文件(夹) void CFileSelectDlg::OnBnClickedButtonSelect() { if(((CButton*)(GetDlgItem(ID ...
- ECharts使用—折线图动态加载
最近需求中用到折线图,单线条,多线交错,之前是散点图,用的是另一个 amcharts.js,这个文档也能找的到,回归早本次重点:ECharts 一.首先引入echarts.common.min.js文 ...
- android-effect
1. 基本框架 2.初探
- C++输出格式
C++输出格式 C++中默认输出有效位数是6位,即 则输出: 221.111.11011199967 //6位有效数字,自动截取保存六位1.99967e+006 //六位以上且无法省略显示将会变为指数 ...
- UITableViewCell上放UICollectionView ,UICollectionViewCell无法复用bug
如题: UITableViewCell上放UICollectionView ,UICollectionViewCell无法复用bug 如果UITableViewCell的size大于整个collect ...
- entity.Database.SqlQuery() 和entity.Database.SqlCommand()
原文地址: http://msdn.microsoft.com/en-us/library/gg715124(v=vs.103) 使用 EF 4.1 或者更新版本, 你可以直接执行任何数据库命令. 在 ...
- C#通过COM组件操作IE浏览器(二):使用IHTMLDocument3完成登录
第一章介绍了如何打开网站,这一章介绍一下使用IHTMLDocument3完成登录博客园,以下为代码: SHDocVw.InternetExplorer oBrowser = new SHDocVw.I ...
- Javascript高级编程学习笔记(81)—— 富文本(1)
富文本编辑 富文本编辑又称为: WYSIWYG(What You See Is What You Get,所见即所得) 常用于博客等用途,虽然没有规范,但是在IE最先引入后其他的浏览器厂商也相继完成了 ...
- Spring boot 内置tomcat禁止不安全HTTP方法
Spring boot 内置tomcat禁止不安全HTTP方法 在tomcat的web.xml中可以配置如下内容,让tomcat禁止不安全的HTTP方法 <security-constraint ...