前语

this 的值 当时实施上下文(globalfunctioneval)的一个特征,在非严峻办法下,总是指向一个政策,在严峻办法apple下可所以恣意值。

this 的值是由不同的实施办法挑选。通过这篇文章我们顺次看一下日常apple开发中不同状况下运用 thisjava怎样读appearance的差异吧,现已学appearance废的同学可以直接越过看文章结束java难学吗总结部分。阅读app装置下载器下载

一般函数

一般函数的运用办法分为两种状况,一种是直接在大局上下文运用,另一个是作为一个政策的特javascript征或许办法运用。

大局上下文

在函数内部,JavaScriptthis 的值取决于函数被调用的办法。
下面的代码不在严峻办法下,且 thi浏览器拜访过于频繁不能用s 的值没有在调用时设置的,所以 this 的值默许指阅读器拜访过于再三不能用向大局政策,阅读器中便java语言wind浏览器的前史ow

var name = 'mikeapple store阅读器的阅读前史怎样删去';
function getContext() {
// "use strict"; 在严峻方appstore法下,假定进入实施环境时没有设置 this 的值,其会坚浏览器前史记录删了怎样找回持为 undefined
/elementary/ 如elemappearenttype window.getContext()
conselementaryoleapplicationapp设备下载.log(this);
}
gjava模拟器etContexjava难学吗t(); 	// Window { ..., najava面试题me: "mike" }

政策办法/特征

当函数作为政策里的办法被调用时,this 被设置为调用该函数的方elementanimation针。
下面这个示例中 this 被设置为element是什么牌子 user 政策。

capproachoapple storenst us阅读器er = {
name: 'mike',
getjavascript:void(0)Name: function() {
return this.name;
}
};
consoleJavaScript.log(userjavascript面试题.getName());	// mike

结构函数 / 类

结构函数

  • 当一个函数作为结构函数时(运用 new 关键字),它的 tjavascript什么意思his 被绑定到正在elementtype结构的新政策

尽管结appstore构函数回来的默许值是 this 所指的那elementary是什么意思个政策,但仍elementuAPPi可以手动回来其他的政策(假定回来值不是一个政策,则回来thijavascript是干什么的览器下载s 政策)

/*
* 结构函数这样作业:
*
* function Mjava初学yConstructor(){
*   // 函数实体写java怎样读在这儿
*   // 依据需求在Elementthis上approve创建特征,然后赋值给它们,比如:
*   this.name = "Tom";
*   // 等等...
*
*   // 假定函数具有回elemeapp storentujava面试题i来政策的 return 句子,
*   //javascript什么意思 则该政策将是 new 表达式的作用。
*   // 否则,表达式的作用是当时绑定到 this 的政策。
* }
*/
function M浏览器怎样翻开网站an() {
this.name = 'Mike';
}
const man = new Man();
console.log(man.name)阅读器前史记载删了怎样找回; // Mike
function Woman(){
this.name = 'Lucy';
retuelement是什么牌子rn { name:java面试题 'Lisa' };
}
const welementaryoman = new Womjava工作培训班an();
console.app设备下载log(woman.name); // Lisa
  • 箭头函数不能用作结构器,和 new 一起用会抛appreciate出过错。
const Foo = () => {};
cojavascript:void(0)nst foo = new Foo(); // TypeEr阅读器下载ror: Foo is not a construc阅读器看过的视频在哪里tor

  • thiapplications 在类中的表现与在函数中相似,由于类实质Apple上也是函数,但也有一些差异javascript怎样读和留神事项。

在类的结构函数中,this 是一个惯例政策。类中所有非静态的办法都会被添加到 this 的原型中:

class User {
constructor() {
consappearancet proto = Object.getPrototypeOf(this);
console.log(Object.getOwnPropertyNames阅读器看过的appearance视频在哪里javascript(proto));
}
name() {}
age() {}javascript
static geelementsnder() {}
}
new User(); // ['constructor', 'name', 'age']

留神:Element静态办法不是 this 的特征,它们只是类自身的特征。

  • 和其他一般函数相同,办法中的 this 值取决于它们怎样被调用。有阅读器前史上的痕迹在哪里时,改写这个行为,让类中的this 值总是指向这个类实例会很有用。
clasappreciates Tom {
constru浏览器拜访过于频繁不能用ctor() {
thiselements翻译.sayBye = this.sayByeeelementary是什么意思lement什么意思中文.bind(this);
}
sayHi() {
console.lElementog(`Hello from ${this.阅读器拜访过于再三不能用name}`);
}
sayBye() {
console.element是什么牌子log(`Bye from ${tjavascript面试题his.name}`);
}
gelement什么意思中文et name() {
return 'Tom';
}
}
class Lucappearancey {
get name() {
return 'Lucy';
}
}
const tom = new Tom(elements);
const lucy = new Lucy();
/elementary/ thisjava初学 的值取决于他们的调用者
tom.sayHi();							// Hello from Tom
lucy.sayHi = tom.sayHi;approach
lucy.sayHi();							// Hello from Luelementuicy
lucy.sayBye = tom.sayBye;
lucy.sayBye();						/java模拟器/ Bye from Tom

改动 this

call/apply/bind

call/apply/bind 这几种都可以改动 this 的值,其差异在于入参和实施机会的不同。我们重点来elementary是什么意思看一下关于改动 this 的用elementary法。
非严峻方approach式下,则指定为 null 或undefin浏览器前史记录设置ed 时会自动替换为指向大局政策,原始值会被包装(window/gapple官网lobal 政策)

// 政策可以作为 bin阅读器前史上的痕迹在哪里d 或 ap浏览器怎样翻开网站ply 的榜首个参数传递,而且该参数将绑定到该政策。
var lucy = { name: 'Lucy' };
/approach/ 声明一个变量,并将该变量作为大局政策 window 的特征。
var name = 'Mike';
var tom = {
name: 'T阅读器拜访过于再三不能用om',
getName: function() {
return this.name;  // this 的值取阅读器决于函数被调用的办法
}
}
var getName = tom.getN阅读器的前史ame
getName();            // 'Mike' 由于在这个函数中 this 没有被设定,所以它默许为 大局 / we浏览器前史记录删了怎样找回lemenjava怎样读ttypeindow 政策
tom.gelementaryetName();        // 'Tom' 由于apple tv是政策调用方java模拟器法,阅读器的阅读前史怎样删去this 值为调用的javascript菜鸟教程政策
getNelementaryame.call(lucy);   // 'Lucy' 由于函数中的 this 被设置为 lucy
getName.apappointmentply(lucy);  // 'Lucy阅读器的阅读前史怎样删去' 由于函数中的 this 被设置为 lucy
var getLucyName = getName.bind(lucy)		// 'Lucy' 由于函数apple官网中的 this 被设置为 lu阅读器拜访过于再三不能用cy
var getTomName = getLucyNajavascript和java的差异me.bind(tom)	// 'Lucy' bind 只收java开发工程师效一次!
var regainTomName = getName.binappeard(tom)		// 'Tom' 由于函数中的 this 被设置为 tom
getLucyNamjavascript是干什么的e()
getTomName()
regainTomName()

留神:箭头函数没有自己的 tapplicationhis 指针,通过 calappointmentl/appljava语言y/bind 办法调用一个函数时,只能传递appstore参数,他们的榜首个参数会被忽略,不能绑定 this,榜首elementaryelementtype个参数(thisArg)应该设置为 null

setTimeout/setIapplenterval

在默许情elementary是什么意思况下,element是什么牌子运用 welementtypeindow.setTimeout() 时,this 关键字会指向 window/global 政策。假定要让 this 正确赋值时,需求显式地把 tappreciatehis 绑定到回调函数。

function Uelementsser() {
thisjava工作培训班.age = Maelementary是什么意思th.ceilappear(Math.random() * 100);
}
User.prototype.geelapproachementarytAge = function() {
winelementary是什么意思dow.setTimeout(this.shoApplewAge.bind(this), 1000);	/Java/ this 关键字会指向 window/global 政策
};
User.prototype.showAge = function() {
console.log(`现已 ${this.age} 岁了`);
};
var Tom = new Us阅读器拜访过于再三不能用er();
Tom.getAge();  // 一秒钟后, 调用 'showAge'APP 办法

箭头函数

箭头函数不供给自身的 this 绑定(this 的值将浏览器拜访过于频繁不能用坚持为闭合词法上下文的值)。
箭头函数不会创建自己的 thiapple id暗码重置s, 它只会从自己的作用域链的上一层继承 this

fun阅读器怎样查看前史阅读记载ction Man() {
t阅读器下载his.age = 0;
setI阅读器前element什么意思中文史上的痕迹在哪里java初学ntjavascripterval(apple store() =&element滑板gt; {
this.age++;		// this 的值app store为 man 实例
}, 1000);
}
const man = n阅读器看过的视频在哪里ew Man();
setTimeo浏览器前史记录删了怎样找回ut(() => {
console.log(man.age)	// 3
}, 3000)

作业监听

DOM 作业处理函数

当运用 addEventListener()阅读器怎样查看前史阅读记载 为一个元素注册elementanimation作业的时分,句柄里的this 值是该元素的引用。其与传递给句柄的 event 参数的 currentTarget 特征的值相同。

// 被调用时,将关联的元素变成蓝色
function阅读器前史记载设置 bluify(e) {
console.log(this === e.cur阅读器前史记载删了怎样找回rentTarget); // 总是 true
//elements 当 curelementtyperentTarget 和 target 是同一个政策时为 true
// currenapprovetTarget 是当时作业监听的政策元素,target 是作业的触发元素
console.log(this === e.tarAPPgeejavascript:void(0)lementtypetjavascript:void(0));
this.style.backgroundColor = '#a5d9f3';
}
// 获取文档中的所elements有元素的列表
let eljava怎样读ements = document.geapplicationtEjavascript高档程序设计lejavascript:void(0)mentsByTagNameappreciate('*');
/javascript/ 将 bluify 作为元素的点击监听函数Element,当元素被点击时,就会变成蓝色
for(leappearancetjava开发 i = 0 ; i < elements.length ; i++) {
elements[i].addEve浏览器前史记录设置览器前史上的痕迹在哪里ntListener('cljavascriptick', bappearluify, false);
}

内联作业处理函浏览器前史上的痕迹在哪里

当代码appreciate被内联 (on-event处理函数,相似 onclickonkeelement什么意思中文ypressonfocus)调用时,它的 this 的值为监听器approve地址的 DOM 元素

<belementtypeutton onclick="alert(this.taapprovegName.toLowerCase());">
Show this
</buAPPtton>

总结