javascript基础之this指针
越往背面学越发明基础的重要性,所以盘算从新过一遍基础,以后出几个vue和react的实战教程。
ok,严归正传。
起首什么是this
this是实行上下文建立时一定的一个在实行过程当中不可转变的变量。
总之记着一句话this的指向由以实行时刻的上下文决议的而非定义时的上下文
看过一本书叫《JavaScript言语精炼》,内里把this的涌现场景为4类,固然那是在es6出来之前,不过也能够示意基础的用法了,在es6出来以后涌现箭头函数,所以一共是5种:
- 有对象的就指向该对象
- 没有对象的就指向全局对象,在非严厉形式下指向window
- 有new组织函数的就指向new完以后的新对象
- 经由过程apply或许bind或许call转变this指向的对象
- 涌现箭头函数的时刻,this指向为定义时的上下文对象而非指向时,而且不能被call转变
函数有对象的时刻就指向该对象
let name = 'bob';
let obj = {
name,
getName(){
console.log(this.name);
}
};
console.log(obj.getName()); //=>bob
因为getName()属于对象obj,而且由obj举行挪用,所以毫无疑问是指向obj这个对象,ok,我们再看一个例子
var name = 'jay';
var obj = {
name:'bob'
getName(){
console.log(this.name);
}
};
let t = obj.getName;
console.log(t()); // => jay
如上,为何此次t函数打印出来的值是jay?excuse me?
实在要明白也好简朴,当实行t()的时刻(在非严厉形式下)实在t实际上是属于全局对象(在浏览器环境)也就是window,而var name = ‘jay’为全局变量,所以输出jay也不奇怪了。
没有对象的就指向全局对象,在非严厉形式下指向window
var name = 'bob';
var obj = {
name,
getName:function(){
function otherName(){
return this.name;
}
console.log(otherName());
}
};
obj.getName(); // =>bob
otherName随就是在obj的getName中定义的,然则它照样一个一般函数,他的this实在和
var name = 'bob';
function otherName(){
return this.name;
}
console.log(otherName()); // =>bob
实行结果一样的,他的this的指向实际上是undefined,在非严厉形式下,当this指向undefined的时刻实在会自动转化成window对象(在浏览器中)。
ok,让我们再看一种状况
var name = 'bob';
function otherName(){
"use strict"
return this.name;
}
console.log(otherName()); // Uncaught TypeError: Cannot read property 'name' of undefined
这个时刻会抛出一个毛病,因为在严厉形式下当this指针指向undefined的时刻不会自动转化成window对象。
有new组织函数的就指向new完以后的新对象
起首什么是组织函数,实在能够用一句话去归纳综合:
组织函数实在就是用来新建对象的函数
JavaScript自身就为我们定义了几个经常运用的组织函数,你一定熟悉 比方Function, Object, Array, Date等等,只不过我们寻常object,function都不是用new Function,new Object,而是用他的语法糖比方
var obj = {} 实在等同于 var obj = new Object();
function Human(name,age,sex){
this.name = name;
this.age = age;
this.sex = sex;
this.common = function(){
console.log('名字为'+this.name);
}
}
var h = new Human('bob',25,'sex');
h.common(); // => 名字为bob
有new组织函数的就指向new完以后的新对象,此时的this指向的是他new涌现来的对象h。
经由过程apply或许bind或许call转变this指向的对象
因为函数具有函数作用域,所以有时刻我们须要援用外层作用域的时刻通经常运用的要领是call,apply,和bind这三兄弟
起首我们来看看call,老样子先看代码
var a = {
user:"bob",
fn:function(){
console.log(this.user);
}
}
var b = {
user:'jay'
}
a.fn.call(b); // => jay
假如不挪用call,我们直接运用a.fn的话将会输出bob,因为fn这个要领是a这个对象定义出来的,所以this指向是a这个对象,然则当我们运用了call以后this指针指向的对象就变成b了,于是乎也不难明白为何输出的user是jay了。
简介一下call的用法:
fn.call(obj,argument-1,argument-1,…)
是以obj这个对象去替代fn的this指针也就时fn的this指针指向obj,背面的argument-1,argument-1是形参
apply和call的用法基础雷同,不同点是apply挪用传形参的时刻穿的是数组或许是类数组,以下:
fn.apply(obj,[argument-1,argument-1,…])
至于bind和call或许apply的区分,我也举一个例子
var a = {
user:"bob",
fn:function(){
console.log(this.user);
}
}
var b = {
user:'jay'
}
var c = a.fn.bind(b);
c(); // => jay
从上面这个例子能够得出一个结论:
实在call和apply要领,都是对函数的直接挪用,然则bind()要领须要加上()来实行。
涌现箭头函数的时刻,this指向为定义时的上下文对象而非指向时,而且不能被call转变
起首我们先看一个例子:
var obj = {name:'bob'};
var name = 'jay';
var sayName = () => console.log(this.name);
sayName(); // => jay
sayName.call(obj); //jay
由上面的例子我们能够看出来此时this指针在用call转变了以后指向的依然是全局对象(非严厉浏览器环境中是window)而非obj。
ok,至此this指针的用法总结终了。
跋文
以上this的用法都为个人总结,若有不当之处还请指出
转载请说明出处.