javascript中的this

最新推荐文章于 2024-10-02 23:06:10 发布

原创最新推荐文章于 2024-10-02 23:06:10 发布 · 164 阅读

0 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

4 篇文章

订阅专栏

本文详细解析了 JavaScript 中 this 指针的概念及用法，包括构造函数、对象属性、普通函数、嵌套函数、箭头函数等场景中的 this 绑定规则，并提供了丰富的示例代码。

1.使用场景

构造函数
对象属性
普通函数、
call apply bind
========================================上述this只有在执行的时候才能确定，定义时无法确定
嵌套函数
箭头函数
匿名函数、setTimeout/setInterval

2.实例

构造函数

		function Fn1(name){
			this.name=name;
		};
		Fn1.prototype.hobby=function(){
			alert(1)
		};
		var a = new Fn1("duliz");

对象属性

		var b=1;
		var a={
			b:2,
			c:function(){
				alert(this.b)
			}
		};
		a.c();//2
		var fn=a.c;
		fn();//1

普通函数

call apply bind

function a4(m){
			console.log(this)
			console.log(m)
		};
		a4.call({},"duliz");//window
		a4.apply({},["duliz"]);
		var b4=function (){


			console.log(this)
		}.bind({});
		b4();
		var e4=a4;
		F4=e4.bind({});
		F4()
function a4(m){
			console.log(this)
			console.log(m)
		};
		a4.call({},"duliz");//window
		a4.apply({},["duliz"]);
		var b4=function (){


			console.log(this)
		}.bind({});
		b4();
		var e4=a4;
		F4=e4.bind({});
		F4()

嵌套函数(在嵌套函数中：和变量不同，this关键字没有作用域的限制。JavaScript对于全局函数内的this绑定为全局对象，而对于嵌套函数也采用了相同的解释)

		var me = { 
			name : 'Jimbor', 
			blog : 'http://jmedia.cn/', 
			sayMyName : function(){ 
			var pre = 'My name is: '; 
			function displayName(){ 
				alert(pre + this.name); 
			} 
			displayName.apply(me); 
			//  displayName()
			} 
		} 
		me.sayMyName();

箭头函数（箭头函数内部的this是词法作用域，由上下文确定，就是定义时所在的对象，而不是使用时所在的对象）

上面的例子就可以使用箭头函数矫正
		var me = { 
			name : 'Jimbor', 
			blog : 'http://jmedia.cn/', 
			sayMyName : function(){ 
			var pre = 'My name is: '; 

			var displayName=()=>{ alert(pre+this.name)};
			displayName()
			} 
		} 
		me.sayMyName();

function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}

var id = 21;

foo.call({ id: 42 });
// id: 42

匿名函数、setTimeout/setInterval函数都指向window

		function a6(){
			var b6=1;
			(function(){
				console.log(this)
			})();

		};
		a6.call({})

		function a7(){
			var b7=1;
			setTimeout(function(){
				console.log(this);//window
				console.log(b7)//1
			},100)

		};
		a7.call({})