javascript this指向初探

注:this 即绑定函数上下文
1. 普通函数this指向

var user = "ynqc";
function f() {
    var user = "hello";
    console.log(this.user); //ynqc
    console.log(this); //Window
}
f();

函数(箭头函数不一样)的this值即谁调用了该函数,this就指向谁。这里【f()】等价于【window.f()】,即this指向window。

2. 对象里面this指向

var obj = {
	name: "ynqc",
	f: function () {
		console.log(this.name); // ynqc
	}
}
obj.f();

由于【obj.f()】是obj调用了函数【f】,所以这里this指向了obj

3.对象里面的对象,对象内函数调用

var obj = {
	name: "ynqc",
	age: "22",
	f: function () {
		console.log(this.name); // ynqc
	},
	newObj: {
		name: "new ynqc",
		f: function () {
			console.log(this); // {name: "new ynqc", f: ƒ}
			console.log(this.name); // new ynqc
			console.log(this.age); //undefined
		}
	}
}
obj.newObj.f()

this永远指向的是最后调用它的对象,不会跳级,如下

var obj = {
	age: "22",
	f: function () {
		console.log(this.name); // ynqc
	},
	newObj: {
		age: 23,
		f: function () {
			console.log(this); // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, 	close: ƒ, frames: Window, …}
       		console.log(this.age); // undefined
		}
	}
}
var fuc = obj.newObj.f;
fuc();

4.构造函数里面的this

function f(){
   console.log(this); //f {}
   this.name = "ynqc";
}
var a = new f();
a.bb = "hello";
console.log(a); //f {name: "ynqc", bb: "hello"}
console.log(a.name); //ynqc

由于new关键字可以改变this的指向,将这个this指向对象a(new关键字会创建一个空的对象,然后会自动调用一个函数apply方法,将this指向这个空对象,这样的话函数内部的this就会被这个空对象替代)。

5.构造函数,this遇到return

function f() {
   this.name = "ynqc";
     // return {}; // undefined
     // return function () {}; // undefined
     // return 8; // ynqc
     // return "ynqc"; // ynqc
     // return undefined; // ynqc
     // return null; // ynqc
     // return false; // ynqc
     return true; // ynqc
 }
 var a = new f();
 console.log(a.name);

注:在严格版中的默认的this不再是window,而是undefined

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值