setTimeout改变this指向

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			var name = "李四";

			function Coder(name) {
				this.name = name;

				function alerts() {
					alert(this.name);
				}
				this.getName = function() {
					console.log(this.name)
				};
				this.delayGetName = function() {
					setTimeout(function() {
						alert(this.name);
					}, 1000); //李四
				};
			}
			var me = new Coder(‘张三‘)
			me.delayGetName();
		</script>
	</head>

	<body>
	</body>

</html>

　上面的　setTimeout  里面的this 指向window；

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			var name = "李四";

			function Coder(name) {
				this.name = name;

				function alerts() {
					alert(this.name);
				}
				this.getName = function() {
					console.log(this.name)
				};
				this.delayGetName = function() {
					var that=this;   //改变this指向
					setTimeout(function() {
						alert(that.name);
					}, 1000); //张三
				};
			}
			var me = new Coder(‘张三‘)
			me.delayGetName();
		</script>
	</head>

	<body>
	</body>

</html>

　　

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			var name = "李四";

			function Coder(name) {
				this.name = name;

				function alerts() {
					alert(this.name);
				}
				this.getName = function() {
					console.log(this.name)
				};
				this.delayGetName = function() {

					setTimeout(function() {
						var that=this;   //setTimeout 里面的this 指向window
						alert(that.name);
					}, 1000); //李四
				};
			}
			var me = new Coder(‘张三‘)
			me.delayGetName();
		</script>
	</head>

	<body>
	</body>

</html>

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			var name = "李四";

			function Coder(name) {
				this.name = name;

				function alerts() {
					alert(this.name);
				}
				this.getName = function() {
					console.log(this.name)
				};
				this.delayGetName = function() {
					setTimeout(function() {
						alert(this.name);
					}.bind(this), 1000); // 张三
				};
			}
			var me = new Coder(‘张三‘)
			me.delayGetName();
		</script>
	</head>

	<body>
	</body>

</html>

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			var name = "李四";

			function Coder(name) {
				this.name = name;

				function alerts() {
					alert(this.name);
				}
				this.getName = function() {
					console.log(this.name)
				};
				this.delayGetName = function() {
					setTimeout(()=>{   //使用箭头函数
						alert(this.name);
					}, 1000); // 张三
				};
			}
			var me = new Coder(‘张三‘)
			me.delayGetName();
		</script>
	</head>

	<body>
	</body>

</html>

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			function Coder(name) {
				this.name = name;

				function alerts() {
					alert(this.name);
				}
				this.getName = function() {
					console.log(this.name)
				};
				this.delayGetName = function() {
					setTimeout(alerts.bind(this), 1000);  //张三
				};
			}
			var me = new Coder(‘张三‘)
			me.delayGetName(); //延迟一秒输出Jins
		</script>
	</head>

	<body>
	</body>

</html>

　　

bind顾名思义，绑定。

bind()方法会创建一个新函数，当这个新函数被调用时，它的this值是传递给bind()的第一个参数，它的参数是bind()的其他参数和其原本的参数。

上面这个定义最后一句有点绕，我们来理一下。

bind()接受无数个参数，第一个参数是它生成的新函数的this指向，比如我传个window，不管它在何处调用，这个新函数中的this就指向window，这个新函数的参数就是bind()的第二个、第三个、第四个....第n个参数加上它原本的参数。（行吧，我自己都蒙圈了）

我们还是看看栗子比较好理解，举个bind()最基本的使用方法：

this.x = 9;
var module = {
  x: 81,
  getX: function() { return this.x; }
};

module.getX(); // 返回 81

var retrieveX = module.getX;
retrieveX(); // 返回 9, 在这种情况下，"this"指向全局作用域

// 创建一个新函数，将"this"绑定到module对象
// 新手可能会被全局的x变量和module里的属性x所迷惑
var boundGetX = retrieveX.bind(module);
boundGetX(); // 返回 81

这里很明显，我们在window对象下调用retrieveX，得到的结果肯定是window下的x，我们把module对象绑定到retrieveX的this上，问题就解决了，不管它在何处调用，this都是指向module对象。

还有bind()的其他参数，相信第一次接触bind()的朋友看到上面的定义都会蒙圈。

还是举个栗子：

function list() {
  return Array.prototype.slice.call(arguments);
}

var list1 = list(1, 2, 3); // [1, 2, 3]

// 创建一个拥有预设初始参数的函数
var leadingThirtysevenList = list.bind(undefined,[69,37],{a:2});

var list2 = leadingThirtysevenList(); // [[69,37],{a:2}]
var list3 = leadingThirtysevenList(1, 2, 3); // [[69,37],{a:2}, 1, 2, 3]

list函数很简单，把传入的每个参数插入到一个数组里，我们用bind()给list函数设置初始值，因为不用改变list中this的指向，所以直接传undefined，从第二个参数开始，就是要传入list函数的值，list2和list3的返回值很好的说明了一切。

我自己一般使用的bind()的场景是配合setTimeout函数，因为在执行setTimeout时，this会默认指向window对象，在使用bind()之前，我是这么做的：

    function Coder(name) {
        var that = this;
        that.name = name;
        that.getName = function() {
            console.log(that.name)
        };
        that.delayGetName = function() {
            setTimeout(that.getName,1000)
        };
    }
    var me = new Coder(‘Jins‘)
    me.delayGetName()//延迟一秒输出Jins

在函数内顶层定义一个that缓存this的指针，这样不论怎么调用，that都是指向 Coder的实例，但是多定义一个变量总是让人不太舒服。

使用bind()就简单多了：

    function Coder(name) {
        this.name = name;
        this.getName = function() {
            console.log(this.name)
        };
        this.delayGetName = function() {
            setTimeout(this.getName.bind(this),1000)
        };
    }
    var me = new Coder(‘Jins‘)
    me.delayGetName()//延迟一秒输出Jins

这样就OK了，直接把setTimeout的this绑定到外层的this，这肯定是我们想要的！

行吧，先聊这么多，坚持学习！

bind()方法会创建一个新的函数，成为绑定函数。当调用这个绑定函数时，绑定函数会以创建它时传入的第一个参数作为this，传入bind()方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调取原函数。

实际使用中我们经常会碰到这样的问题：

var name = "pig";
function Person(name){
    this.name = name;
    this.getName = function(){
        setTimeout(function(){
            console.log("Hello,my name is "+this.name);
        },100);
    }
}
var weiqi = new Person("卫旗");
weiqi.getName();
//Hello,my name is pig

这个时候输出this.name是pig，原因是this的指向是在运行函数时确定的，而不是在定义函数时确定的，再因为setTimeout是在全局环境下只想，所以this就指向了window。

以前解决这个问题的办法通常是缓存this，例如：

var name = "pig";
function Person(name){
    this.name = name;
    this.getName = function(){
        //在这里缓存一个this
        var self = this;
        setTimeout(function(){
            //在这里是有缓存this的self
            console.log("Hello,my name is "+self.name);
        },100);
    }
}
var weiqi = new Person("卫旗");
weiqi.getName();
//Hello,my name is 卫旗

这样就解决了这个问题，非常方便，因为它使得setTimeout函数中可以访问Person的上下文。

现在有一个更好的解决办法，可以使用bind()函数，上面的例子可以被更新为：

var name = "pig";
function Person(name){
    this.name = name;
    this.getName = function(){
        setTimeout(function(){
            console.log("Hello,my name is "+this.name);
        }.bind(this),100);
        //注意上面这一行，添加了bind(this)
    }
}
var weiqi = new Person("卫旗");
weiqi.getName();
//Hello,my name is 卫旗

bind()最简单的用法是创建一个函数，使得这个函数无论怎么样调用都拥有同样的this值。JavaScript新手经常犯的一个错误就是将一个方法从一个对象中拿出来，然后再调用，希望方法中的this是原来的对象（比如在回调函数中传入这个方法）。如果不做特殊处理的话，一般会丢失原来的对象。从原来的函数和原来的对象创建一个绑定函数，则可以很漂亮的解决这个问题：

//定义全局变量x
var x = "window";
//在module内部定义x
var module = {
    x:"module",
    getX:function(){
        console.log(this.x);
    }
}
module.getX();
//返回module，因为在module内部调用getX()

var getX = module.getX;
getX();
//返回window，因为这个getX()是在全局作用域中调用的

//绑定getX()并将this值设为module
var boundGetX = getX.bind(module);
boundGetX();
//返回module，绑定以后this值始终为module

浏览器支持情况：

Browser Version support
Chrome 7
FireFox(Gecko) 4.0(2)
Internet Explorer 9
Opera 11.60
Safari 5.14

很不幸，Function.prototype.bind在IE8及以下版本中不被支持，所以如果没有一个备选方案的话，可能会在运行时出现问题。bind函数在ECMA-262第五版才被加入。它可能不无法在所有浏览器上运行。你可以在脚本部分加入如下代码，让不支持的浏览器也能使用bind()功能。

if (!Function.prototype.bind) {
  Function.prototype.bind = function (oThis) {
    if (typeof this !== "function") {
      // closest thing possible to the ECMAScript 5 internal IsCallable function
      throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
    }

    var aArgs = Array.prototype.slice.call(arguments, 1),
        fToBind = this,
        fNOP = function () {},
        fBound = function () {
          return fToBind.apply(this instanceof fNOP && oThis
                                 ? this
                                 : oThis || window,
                               aArgs.concat(Array.prototype.slice.call(arguments)));
        };

    fNOP.prototype = this.prototype;
    fBound.prototype = new fNOP();

    return fBound;
  };
}

语法

fun.bind(thisArg[, arg1[, arg2[, …]]])

参数

thisArg，当绑定函数被调用时，该参数会作为原函数运行时的this指向，当使用new操作符调用绑定函数时，该参数无效。

arg1, arg2, …，当绑定函数被调用时，这些参数加上绑定函数本身的参数会按照顺序作为原函数运行时的参数。

描述

bind()函数会创建一个新的函数（一个绑定的函数）有同样的函数体（在ECMAScript 5 规范内置Call属性），当该函数（绑定函数的原函数）被调用时this值绑定到bind()的第一个参数，该参数不能被重写。绑定函数被调用时，bind()也接受预设的参数提供给原函数。一个绑定函数也能使用new操作符创建对象：这种行为就像把原函数当成构造器。提供的this值被忽略，同事调用的参数被提供给模拟函数。

总结：

<!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>

　　

时间： 2024-10-16 11:51:11

setTimeout改变this指向的相关文章

this指向及改变this指向的方法

一.函数的调用方式决定了 this 的指向不同,但总的原则,this指的是调用函数的那个对象: 1.普通函数调用,此时 this 指向 全局对象window function fn() { console.log(this); // window } fn(); // window.fn(),此处默认省略window 2.在严格模式下"use strict",为undefined. function foo(){ "use strict"; //表示使用严格模式 c

可以改变this指向的方法

this一般指向的是当前被调用者,但也可以通过其它方式来改变它的指向,下面将介绍三种方式: 1.call用作继承时: function Parent(age){ this.name=['mike','jack','smith']; this.age=age; } function Child(age){ Parent.call(this,age);//把this指向Parent,同时还可以传递参数 } var test=new Child(21); console.log(test.age);/

向null地址copy数据和不断改变指针指向

#define _CRT_SECURE_NO_WARNINGS#include<stdio.h>#include<stdlib.h>#include<string.h> int main11(){ system("pause"); return 0;} void main22(){ char *p1 = NULL; p1 = 0x00077; strcpy(p1, "11111222"); system("pause&q

javascript 切换上下文，事件绑定中改变this指向

在事件绑定中,调用回调函数时改变this的指向,通常有几种做法,原生的bind()方法,和jquery中的$.proxy().如果在事件绑定中,想让上下文从目标html元素中切换为局部变量,就可以这样做. 两个例子: ① func.bind(obj); 参数: func ,要调用的函数对象,必选 obj ,this 关键字可在新函数中引用的对象,必选 返回: 与 func 函数相同的新函数 new function(){ this.appName = "wem"; document.d

改变this指向的call，apply，bind方法

var a = { user:"bgg", fn:function(){ console.log(this.user); } } var b = a.fn; b(); //undefined 我们是想打印对象a里面的user却打印出来undefined是怎么回事呢?如果我们直接执行a.fn()是可以的. 但是有时候我们不得不将这个对象保存到另外的一个变量中,那么就可以通过以下方法. 1.call() var a = { user:"bgg", fn:function

单链表的sort以及resver的实现（改变链表指向而非数值）

单链表的sort 排序采用冒泡法,不是单纯的改变链表结点的值,而是通过改变物理结构上的指针域指向实现. void sort(List *list) { if(list->size <=1)` //基本条件 return ; Node *p,*q,*pa,*temp; for(int i=0;i<list->size-1;i++)//控制总次数 { q=list->first->next; //初始换三个指针 p=q->next; //关系为pa>q>p

JavaScript 中call()、 apply()、 bind()改变this指向理解

最近开发的过程中遇到了this指向问题,首先想到的是call().apply().bind()三个方法,有些时候这三个方法确实是十分重要,现在我们就把他们的使用方法及异同点讲解一下. 1.每个函数都包含三个非继承而来的方法,call()方法.apply()方法和bind()方法       2.相同点:三者的作用都是一样的,都是在特定作用中调用函数,等于设置函数体内this的值,以扩充函数赖以运行的作用域. 一般来说,this总是指向调用某个方法的对象,但是使用call().apply()和bi

js中this绑定方式及如何改变this指向

this的绑定方式基本有以下几种: 隐式绑定 显式绑定 new 绑定 window 绑定 箭头函数绑定 隐式绑定 第一个也是最常见的规则称为 隐式绑定. var a = { str: 'hello', sayHi() { console.log(this.str) } } a.sayHi() a 调用sayHi,所以this指向了对象a 我们来看一个类似但稍微高级点的例子. var wrapper = { name: 'user1', sayName() { console.log(this.n

proxy改变this指向

var core_slice = Array.prototype.slice; var proxy = function(context,fn) { var args, proxy; if ( typeof fn !== 'function') { return undefined; } args = core_slice.call( arguments, 2 ); proxy = function() { return fn.apply( context, args.concat( core_