setTimeout的this指向：学习apply、call、bind
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var name = "李四";
function Coder(name) {
this.name = name;
function alerts() {
console.log('alert:' + this.name);
}
this.getName = function() {
console.log('this.getName'+this.name)
};
this.delayGetName = function() {
setTimeout(function() {
console.log('--:' + this.name)
}, 1000);
};
this.delayGetName0 = function() {
setTimeout(() => {
console.log('0:' + this.name);
}, 1000);
};
this.delayGetName1 = function() {
var that = this;
setTimeout(function() {
console.log('1:' + that.name);
}, 1000);
};
this.delayGetName2 = function() {
setTimeout(function() {
console.log('2:' + this.name);
}.bind(this), 1000);
};
this.delayGetName3 = function() {
setTimeout(function() {
console.log('3:' + this.name);
}.call(this), 1000);
};
this.delayGetName4 = function() {
setTimeout(function() {
console.log('4:' + this.name);
}.apply(this), 1000);
};
this.delayGetName5 = function() {
setTimeout(alerts.bind(this), 1000);
};
this.delayGetName6 = function() {
setTimeout(this.getName.bind(this), 1000);
};
}
var me = new Coder('张三');
me.delayGetName();
me.delayGetName0();
me.delayGetName1();
me.delayGetName2();
me.delayGetName3();
me.delayGetName4();
me.delayGetName5();
me.delayGetName6();
</script>
</head>
<body>
</body>
</html>
复制代码
call,apply 不行的缘由是：bind返回的是函数，bind 是返回对应函数，便于稍后调用；apply 、call 则是当即调用 。
apply、call、bind
apply call借用他人的函数方法javascript
网上文章虽多，大多复制粘贴，且晦涩难懂，我但愿可以经过这篇文章，可以清晰的提高对apply、call、bind的认识，而且列出一些它们的妙用加深记忆。html
apply、call前端
在 javascript 中，call 和 apply 都是为了改变某个函数运行时的上下文（context）而存在的，换句话说，就是为了改变函数体内部 this 的指向。java
先来一个栗子：es6
function fruits() {}
fruits.prototype = {
color: "red",
say: function() {
console.log("My color is " + this.color);
}
}
var apple = new fruits;
apple.say(); //My color is red复制代码
可是若是咱们有一个对象banana= {color : "yellow"} , 可是若是咱们有一个对象banana= {color : "yellow"} ,咱们不想对它从新定义 say 方法，那么咱们能够经过 call 或 apply 用 apple 的 say 方法：，那么咱们能够经过 call 或 apply 用 apple 的 say 方法：面试
banana = {
color: "yellow"
}
apple.say.call(banana); //My color is yellow
apple.say.apply(banana); //My color is yellow复制代码
因此，能够看出 call 和 apply 是为了动态改变 this 而出现的，当一个 object 没有某个方法（本栗子中banana没有say方法），可是其余的有（本栗子中apple有say方法），咱们能够借助call或apply用其它对象的方法来操做。数组
见解(不一样角度)：浏览器
- fruits() 打印出别的color 用call修改color的this指针
- banana 没有say() 因此借用fruits()中的say() 来打印
apply、call 的区别bash
对于 apply、call 两者而言，做用彻底同样，只是接受参数的方式不太同样。例如，有一个函数定义以下：app
var func = function(arg1, arg2) {
};复制代码
就能够经过以下方式来调用：
func.call(this, arg1, arg2);
func.apply(this, [arg1, arg2])复制代码
call(this) apply(this) 指的是func()这个函数自己
其中 this 是你想指定的上下文，他能够是任何一个 JavaScript 对象(JavaScript 中一切皆对象)，call 须要把参数按顺序传递进去，而 apply 则是把参数放在数组里。
JavaScript 中，某个函数的参数数量是不固定的，所以要说适用条件的话，当你的参数是明确知道数量时用call 。
而不肯定的时候用 apply，而后把参数 push 进数组传递进去。当参数数量不肯定时，函数内部也能够经过 arguments 这个数组来遍历全部的参数。
为了巩固加深记忆，下面列举一些经常使用用法：
一、数组之间追加
var array1 = [12 , "foo" , {name "Joe"} , -2458];
var array2 = ["Doe" , 555 , 100];
Array.prototype.push.apply(array1, array2);
/* array1 值为 [12 , "foo" , {name "Joe"} , -2458 , "Doe" , 555 , 100] */复制代码
让array1 具有Array的push方法
二、获取数组中的最大值和最小值
var numbers = [5, 458 , 120 , -215 ];
var maxInNumbers = Math.max.apply(Math, numbers), //458
maxInNumbers = Math.max.call(Math,5, 458 , 120 , -215); //458复制代码
让numbers 具有Math的max方法
number 自己没有 max 方法，可是 Math 有，咱们就能够借助 call 或者 apply 使用其方法。
三、验证是不是数组（前提是toString()方法没有被重写过）
functionisArray(obj){
returnObject.prototype.toString.call(obj) === '[object Array]' ;
}复制代码
四、类（伪）数组 => 正真数组 具有数组方法
var domNodes = Array.prototype.slice.call(document.getElementsByTagName("*"));复制代码
Javascript中存在一种名为伪数组的对象结构。比较特别的是 arguments 对象，还有像调用 getElementsByTagName, document.childNodes 之类的，它们返回NodeList对象都属于伪数组。不能应用 Array下的 push , pop 等方法。
深刻理解运用apply、call
下面就借用一道面试题，来更深刻的去理解下 apply 和 call 。
定义一个 log 方法，让它能够代理 console.log 方法，常见的解决方法是：
function log(msg) {
console.log(msg);
}
log(1); //1
log(1,2); //1复制代码
上面方法能够解决最基本的需求，可是当传入参数的个数是不肯定的时候，上面的方法就失效了，这个时候就能够考虑使用 apply 或者 call，注意这里传入多少个参数是不肯定的，因此使用apply是最好的，方法以下:
function log(){
console.log.apply(console, arguments);
};
log(1); //1
log(1,2); //1 2复制代码
接下来的要求是给每个 log 消息添加一个"(app)"的前辍，好比：
log("hello world"); //(app)hello world复制代码
该怎么作比较优雅呢?这个时候须要想到arguments参数是个伪数组，经过 Array.prototype.slice.call 转化为标准数组，再使用数组方法unshift，像这样：
function log(){
//伪类数组 => 正真的数组
var args = Array.prototype.slice.call(arguments);
args.unshift('(app)');
console.log.apply(console, args);
};复制代码
bind
说完了 apply 和 call ，再来讲说bind。bind() 方法与 apply 和 call 很类似，也是能够改变函数体内 this 的指向。
MDN的解释是：bind()方法会建立一个新函数，称为绑定函数，当调用这个绑定函数时，绑定函数会以建立它时传入 bind()方法的第一个参数做为 this，传入 bind() 方法的第二个以及之后的参数加上绑定函数运行时自己的参数按照顺序做为原函数的参数来调用原函数。
var foo = {
bar : 1,
eventBind: function(){
var _this = this;
$('.someClass').on('click',function(event) {
/* Act on the event */
console.log(_this.bar); //1
});
}
}复制代码
因为 Javascript 特有的机制，上下文环境在 eventBind:function(){ } 过渡到 $('.someClass').on('click',function(event) { }) 发生了改变，上述使用变量保存 this 这些方式都是有用的，也没有什么问题。固然使用 bind() 能够更加优雅的解决这个问题：
var foo = {
bar : 1,
eventBind: function(){
$('.someClass').on('click',function(event) {
/* Act on the event */
console.log(_this.bar); //1
}.bind(this));
}
}复制代码
在上述代码里，bind() 建立了一个函数，当这个click事件绑定在被调用的时候，它的 this 关键词会被设置成被传入的值（这里指调用bind()时传入的参数）。所以，这里咱们传入想要的上下文 this(其实就是 foo )，到 bind() 函数中。而后，当回调函数被执行的时候， this 便指向 foo 对象。再来一个简单的栗子：
var bar = function(){
console.log(this.x);
}
bar(); // undefined
var func = bar.bind(foo);
func(); // 3复制代码
把foo.bar的值传入bar()中来
这里咱们建立了一个新的函数 func，当使用 bind() 建立一个绑定函数以后，它被执行的时候，它的 this 会被设置成 foo ， 而不是像咱们调用 bar() 时的全局做用域。
var bar = function(){
console.log(this.x);
}
var foo = {
x:3
}
var sed = {
x:4
}
var func = bar.bind(foo).bind(sed);
func(); //?
var fiv = {
x:5
}
var func = bar.bind(foo).bind(sed).bind(fiv);
func(); //?复制代码
答案是，两次都仍将输出 3 ，而非期待中的 4 和 5 。缘由是，在Javascript中，屡次 bind() 是无效的。更深层次的缘由， bind() 的实现，至关于使用函数在内部包了一个 call / apply ，第二次 bind() 至关于再包住第一次 bind() ,故第二次之后的 bind 是没法生效的。
apply、call、bind比较
那么 apply、call、bind 三者相比较，之间又有什么异同呢？什么时候使用 apply、call，什么时候使用 bind 呢。简单的一个栗子：
var obj = {
x: 81,
};
var foo = {
getX: function() {
return this.x;
}
}
console.log( foo.getX.bind(obj)() ); //81
console.log( foo.getX.call(obj) ); //81
console.log( foo.getX.apply(obj) ); //81复制代码
- bind() 回调函数 被调用才执行 若当即执行函数 bind()() 多个括号`
- call() apply() 当即执行函数 立刻执行`
三个输出的都是81，可是注意看使用 bind() 方法的，他后面多了对括号。
也就是说，区别是，当你但愿改变上下文环境以后并不是当即执行，而是回调执行的时候，使用 bind() 方法。而 apply/call 则会当即执行函数。
再总结一下：
- apply 、 call 、bind 三者都是用来改变函数的this对象的指向的；
- apply 、 call 、bind 三者第一个参数都是this要指向的对象，也就是想指定的上下文；
- apply 、 call 、bind 三者均可以利用后续参数传参；
- bind是返回对应函数，便于稍后调用；apply、call则是当即调用 。
apply、call的区别和用途
做为一个前端程序媛，在提高学习的道路上，不可避免的与apply和call相遇了。以前因为它俩出镜率有点低，都静静的擦肩而过了！今天不当心被它俩的魅力所吸引，加上本小姐心情好，就让咱们好好的相识一下吧O(∩_∩)O~
ECAMScript 3给Function的原型定义了两个方法,它们是Function.prototype.call和Function.prototype.apply。
一.call和apply的区别
一、Function.prototype.call 和 Function.prototype.apply 都是很是经常使用的方。它们的做用如出一辙,区别仅在于传入参数的形式的不一样。
apply 接受两个参数,第一个参数指定了函数体内 this 对象的指向,
第二个参数为一个带下标的集合,这个集合能够为数组,也能够为类数组,apply 方法把这个集合中的元素做为参数传递给被调用的函数
var func = function( a, b, c ){
console.log([a,b,c]); //输出:[1,2,3]
};
func.apply( null, [ 1, 2, 3 ] );复制代码
call 传入的参数数量不固定, 跟apply 相同的是,第一个参数也是表明函数体内的 this 指向, 从第二个参数开始日后,每一个参数被依次传入函数
var func = function( a, b, c ){
console.log([a,b,c]); //输出:[1,2,3]
};
func.call( null, 1, 2, 3 );复制代码
二、当使用 call 或者 apply 的时候,若是咱们传入的第一个参数为 null,函数体内的 this 会指 向默认的宿主对象,在浏览器中则是 window
var func = function( a, b, c ){
console.log(this === window); // 输出:true
};
func.apply( null, [ 1, 2, 3 ] );复制代码
但若是是在严格模式下,函数体内的 this 仍是为 null
"use strict";
console.log(this === null); // 输出:true
};
func.apply( null, [ 1, 2, 3 ] );复制代码
三、有时候咱们使用 call 或者 apply 的目的不在于指 定this 指向,而是另有用途,好比借用其余对象的方法。那么咱们能够传入 null 来代替某个具体的对象
var a=Math.max.apply( null, [ 1, 2, 5, 3, 4 ] );
console.log(a);// 输出:5
复制代码
二.call和apply的用途
1. 改变this指向
例一
var obj1={
name: 'sven'
};
var obj2={
name: 'anne'
};
window.name = 'window';
var getName = function(){
console.log ( this.name );
};
getName(); // 输出: window
getName.call( obj1 );// 输出: sven
getName.call(obj2 ); // 输出: anne复制代码
其中在执行
<strong>getName.call( obj1 );</strong>复制代码
时，相似于执行
<strong>var getName = function(){
console.log ( obj1.name );// 输出: sven
}; </strong>复制代码
例二
document.getElementById( 'div1' ).onclick = function(){
console.log( this.id );// 输出: div1
var func = function(){
console.log ( this.id );// 输出: undefined
}
func();
};
//修正后
document.getElementById( 'div1' ).onclick = function(){
var func = function(){
console.log ( this.id );// 输出: div1
}
func.call(this);
};
复制代码
2. Function.prototype.bind
Function.prototype.bind = function( context ){
var self = this; // 保存原函数
return function(){ // 返回一个新的函数
return self.apply( context, arguments );//执行新的函数的时候，会把以前传入的context看成新的函数体的this
}
};
var obj={
name: 'sven'
};
var func = function(){
console.log ( this.name );// 输出: sven
}.bind( obj);
func();
//复杂化
Function.prototype.bind = function(){
var self = this, // 保存原函数
context = [].shift.call( arguments ),//须要绑定的this上下文
args = [].slice.call( arguments ); //剩余的参数转成数组
return function(){ // 返回一个新的函数
return self.apply( context, [].concat.call( args, [].slice.call( arguments ) ) );
//执行新的函数的时候，会把以前传入的context看成新的函数体的this
//而且组合两次分别传入的参数，做为新的函数的参数
}
};
var obj={
name: 'sven'
};
var func = function( a, b, c, d ){
console.log ( this.name ); // 输出: sven
console.log([a,b,c,d]) //输出: [1,2,3,4]
}.bind( obj, 1, 2 );
func( 3, 4 );复制代码
3. 借用其余对象的方法
借用方法的第一种场景是“借用构造函数”,经过这种技术,能够实现一些相似继承的效果
var A = function( name ){
this.name = name;
};
var B = function(){
A.apply(this,arguments);
};
B.prototype.getName = function(){
return this.name;
};
var b=new B('sven');
console.log( b.getName() ); // 输出: 'sven'复制代码
借用方法的第二种场景——函数的参数列表 arguments 是一个类数组对象,虽然它也有“下标”,但它并不是正的数组,因此也不能像数组同样,进行排序操做或者往集合里添加一个新的元素。
这种状况下,咱们经常 会借用 Array.prototype 对象上的方法。
好比想往 arguments 中添加一个新的元素,一般会借用 Array.prototype.push；
想把 arguments 转成真正的数组的时候,能够借用 Array.prototype.slice 方法；
想截取arguments 列表中的一个元素时,能够借用 Array.prototype.shift 方法。
var a={};
Array.prototype.push.call( a, 'first' );
console.log ( a.length ); // 输出: 1
console.log(a[0]); //输出: first
//这段代码在大部分浏览器里都能顺利执行,但因为引擎的内部实现存在差别,若是在低版本的 IE浏览器 中执行,必须显式地给对象 a 设置 length属性
var a={
length: 0
}; 复制代码
借用 Array.prototype.push 方法的对象还要知足如下两个条件
一、对象自己要能够存取属性
二、对象的 length 属性可读写。
360云盘代码下载：yunpan.cn/ckcdvDALGAk… （提取码：d76d）
三.在es6的箭头函数（=>）下，call和apply的“失效”
箭头函数有几个使用注意点。
（1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
（2）不能够看成构造函数，也就是说，不可使用new命令，不然会抛出一个错误。
（3）不可使用arguments对象，该对象在函数体内不存在。若是要用，能够用Rest参数代替。
（4）不可使用yield命令，所以箭头函数不能用做Generator函数。
上面四点中，第一点尤为值得注意。this对象的指向是可变的，可是在箭头函数中，它是固定的。
function foo() {
return () => {
return () => {
return () => {
console.log('id:', this.id);
};
};
};
}
var f = foo.call({id: 1});
var t1 = f.call({id: 2})()(); // id: 1
var t2 = f().call({id: 3})(); // id: 1
var t3 = f()().call({id: 4}); // id: 1复制代码
上面代码之中，只有一个this，就是函数foo的this，因此t一、t二、t3都输出一样的结果。由于全部的内层函数都是箭头函数，都没有本身的this，它们的this其实都是最外层foo函数的this。
因为箭头函数没有本身的this，因此固然也就不能用call()、apply()、bind()这些方法去改变this的指向。
- 1. 改变this指向的call，apply，bind
- 2. 修改this指向（bind、call 和 apply）
- 3. this、call、apply、bind
- 4. this、apply、call、bind
- 5. js this,call,apply,bind
- 6. this、apply、call和bind
- 7. JS 的 this 指来指去到底指向哪？（call, apply, bind 改变 this 指向）
- 8. JavaScript中的this/call/apply/bind
- 9. 关于this指针-理解call、apply、bind
- 10. JavaScript this 指针概括(apply、call、bind)
- 更多相关文章...
- • 您已经学习了 XML Schema，下一步学习什么呢？ - XML Schema 教程
- • 我们已经学习了 SQL，下一步学习什么呢？ - SQL 教程
- • 适用于PHP初学者的学习线路和建议
- • Tomcat学习笔记（史上最全tomcat学习笔记）
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 融合阿里云，牛客助您找到心仪好工作
- 2. 解决jdbc(jdbctemplate)在测试类时不报错在TomCatb部署后报错
- 3. 解决PyCharm GoLand IntelliJ 等 JetBrains 系列 IDE无法输入中文
- 4. vue+ant design中关于图片请求不显示的问题。
- 5. insufficient memory && Native memory allocation (malloc) failed
- 6. 解决IDEA用Maven创建的Web工程不能创建Java Class文件的问题
- 7. [已解决] Error: Cannot download ‘https://start.spring.io/starter.zip?
- 8. 在idea让java文件夹正常使用
- 9. Eclipse启动提示“subversive connector discovery”
- 10. 帅某-技巧-快速转帖博主文章（article_content）
- 1. 改变this指向的call，apply，bind
- 2. 修改this指向（bind、call 和 apply）
- 3. this、call、apply、bind
- 4. this、apply、call、bind
- 5. js this,call,apply,bind
- 6. this、apply、call和bind
- 7. JS 的 this 指来指去到底指向哪？（call, apply, bind 改变 this 指向）
- 8. JavaScript中的this/call/apply/bind
- 9. 关于this指针-理解call、apply、bind
- 10. JavaScript this 指针概括(apply、call、bind)