In diesem Artikel wird hauptsächlich dieses Objekt in Javascript vorgestellt, das einen gewissen Referenzwert hat. Jetzt können Freunde in Not darauf verweisen.
In Bezug auf die Verwendung stoßen wir am häufigsten auf The Die wichtigsten sind in globalen Funktionen, in Objektmethoden, beim Aufrufen und Anwenden, in Abschlüssen, in Pfeilfunktionen und in Klassen.
Wir wissen, dass dieses Objekt basierend auf der Ausführungsumgebung der Funktion zur Laufzeit gebunden ist. Der Wert hierfür wird definitiv nicht vor dem Aufruf der Funktion bestimmt, sodass er sich während der Codeausführung auf verschiedene Objekte bezieht. Welche Objektinstanz die Funktion aufruft, in der sich diese befindet, dann repräsentiert dies welche Objektinstanz.
1. Globale Funktion
In der globalen Funktion entspricht dies dem Fenster
var name = "Tina";function sayName() {
alert(this.name);
}
person();//Tina
Da die Funktion person() in der globalen Umgebung ausgeführt wird, ist sie auch die person(), die vom Fensterobjekt im globalen Bereich aufgerufen wird. Daher zeigt dies zu diesem Zeitpunkt auf das Fenster Objekt. Wenn diese Funktion dem Objekt o zugewiesen wird und o.sayName() aufgerufen wird, bezieht sich dies auf das Objekt o, sodass die Auswertung von this.name zur Auswertung von o.name wird.
name = "Tina"
2. Objektmethoden
Wenn eine Funktion als Methode eines Objekts aufgerufen wird, entspricht dies diesem Objekt
var name="Tina";var obj={
name="Tony",
getName: function() {
alert(this.name);
}
};
obj.getName();//"Tony"3.call() und apply( ) und bind()
Wir wissen, dass die Verwendung von call(ctx, parm1,parm2,parm3...) und apply(ctx,[parms]) Calling a ist Funktion in einem bestimmten Bereich entspricht tatsächlich dem Festlegen des Werts dieses Objekts im Funktionskörper;
function sum(num1, num2) { return num1+num2;
}function callSum1(num1, num2) { return sum.apply(this, [num1, num2]);
}function callSum2(num1,num2) { return sum.call(this, num1, num2);
}
alert(callSum1(10, 10)); //20alert(callSum2(10, 10));//20window.color="red";var o={ color: "blue"};function sayColor() {
alert(this.color);
}
sayColor();//"red"sayColor.call(this);//"red"sayColor.call(window);//"red"sayColor.call(o);//"blue"window.color="red";var o={ color: "blue" };function sayColor() {
alert(this.color);
}var objsayColor = sayColor.bind(o);
objsayColor();//"blue"var handler = {
message: "Event handled",
handleClick : function(event) {
alert(this.message);
}
};var btn = document.getElementById("my_btn");
btn.addEventListener("click", handler.handleClick, false);var handler = {
message: "Event handled",
handleClick : function(event) {
alert(this.message);
}
};var btn = document.getElementById("my_btn");
btn.addEventListener("click", function(event){
handler.handleClick(event);
}, false);
var handler = {
message: "Event handled",
handleClick : function(event) {
alert(this.message+":"+event.type);
}
};var btn = document.getElementById("my_btn");
btn.addEventListenr("click", handler.handleClick.bind(handler), false);function bind(fn, context) {
return function() {
return fn.apply(context, arguments);
};
}4. Abschluss
Aufgrund der unterschiedlichen Schreibweisen von Abschlüssen kann die Verwendung dieses Objekts in Abschlüssen manchmal zu Problemen führen;
var name = "The window";var object = {
name: "My Object",
getNameFunc: function() {
return function() {
return this.name;
};
}
};
alert(object.getNameFunc()());//"The window"由于getNameFunc()返回一个函数，因此调用object.getNameFunc()()就会立即调用它返回的函数，结果就是返回一个字符串"The window"，即全局变量的值，此时匿名函数没有取得其包含作用域（外部作用域）的this对象。原因在于内部函数在搜索两个特殊变量this和arguments时，只会搜索到其活动对象为止，因此永远不可能直接访问外部函数中的这两个变量。这时，只需把把外部作用域中的this对象保存在一个闭包能够访问到的变量里，就可以让闭包访问该对象了。
var name = "The window";var object = {
name: "My Object",
getNameFunc: function() {
var that = this;
return function() {
return that.name;
};
}
};
alert(object.getNameFunc()());//"My Object"//节流function throttle(fn, delay) {
var previous = Data.now();
return function() {
var ctx = this;
var args = arguments;
var now = Data.now();
var diff = now-previous-delay;
if(diff>=0) {
previous = now;
setTimeout(function() {
fn.apply(ctx, args);
}, delay);
}
};
}5. 箭头函数
我们知道，箭头函数有几个需要注意的点：
（1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象；
（2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误；
（3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用rest参数代替；
（4）不可以使用yield命令，因此箭头函数不能用作Generator函数；
这里我们只谈论第一点；this对象的指向是可变的，但在箭头函数中，它是固定的；
function foo() {
setTimeout(() => {
console.log('id: ', this.id);
}, 100);
}var id=21;
foo.call({id: 31});//id: 31上述代码中，setTimeout是一个箭头函数，这个箭头函数的定义生效是在foo函数生成时，而它真正加入到执行栈后还要等到100毫秒后才会执行，如果是普通函数，此时的this应该指向全局对象window，这时应该输出21。但是，箭头函数导致this总是指向函数定义生效时所在的对象（本例是{id：31}）所以输出的是id: 31；
箭头函数可以让setTimeout里面的this，绑定定义时所在的作用域，而不是指向运行时所在的作用域。下面是另一个例子：
function Timer() { this.s1 = 0; this.s2 = 0;
setInterval(() => this.s1++, 1000);
setInterval(function() { this.s2++;
}, 1000);
}var timer = new Timer();
setTimeout(() => console.log('s1: ', timer.s1), 3100);//s1: 3setTimeout(() => console.log('s2: ', timer.s2), 3100);//s2: 0上面代码中，Timer函数内部设置了两个定时器，分别使用了箭头函数和普通函数。前者的this绑定定义时所在的作用域（Timer函数)，后者的this指向运行时所在的作用域(即全局对象)。所以，3100毫秒后，timer.s1被更新了3次，timer.s2一次都没更新。
箭头函数可以让this指向固定化，这种特性很有利于封装回调函数。下面代码将DOM事件的回调函数封装在一个对象里面。
var handler = {
id: '123456',
init: function() {
document.addEventListener('click',
event => this.doSomething(event.type), false);
},
doSomething: funcition(type) {
console.log('Handling ' + type + ' for ' + this.id);
}
};上面代码的init方法中，使用了箭头函数，这导致这个箭头函数里面的this，总是指向handler对象。否则，回调函数运行时，this.doSomething这一行会报错，因为此时this指向document对象。this指向的固定化，并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，导致内部的this就是外层代码的this。正是因为它没有this，所以也就不能用作构造函数。由于箭头函数没有自己的this，所以当然不能用call()、apply（）、bind()改变this的指向。
6. class
类的方法内部如果含有this，它默认指向类的实例。
class Logger { /*constructor() {
this.printName = this.printName.bind(this);
}*/
printName(name = 'Nicolas') { this.print(`Hello ${name}`);
}
print(text) {
console.log(text);
}
}
const logger = new Logger();
const { printName } = logger;
printName();上面代码中，printName方法中的this，默认指向Logger类的实例。但是，如果将这个方法提取出来单独使用，this会指向该方法运行时所在的环境，因为找不到print方法而导致报错。一种简单的解决方法就是在构造函数中绑定this。而另一种方法是使用箭头函数：
class Logger {
constructor() { this.printName = (name='Nicolas') => { this.print(`Hello ${name}`);
}
print(text) {
console.log(text);
}
}
const logger = new Logger();
const { printName } = logger;
printName();还有一种方法是使用Proxy，获取方法的时候，自动绑定this。
function selfish (target) {
const cache = new WeakMap();
const handler = {
get (target, key) {
const value = Reflect.get(target, key); if (typeof value !== 'function') { return value;
} if (!cache.has(value)) {
cache.set(value, value.bind(target));
} return cache.get(value);
}
};
const proxy = new Proxy(target, handler); return proxy;
}
const logger = selfish(new Logger());以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
Das obige ist der detaillierte Inhalt vondieses Objekt in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Was ist der Leerzeichencode in HTML?
Was soll ich tun, wenn beim Einschalten des Computers englische Buchstaben angezeigt werden und der Computer nicht eingeschaltet werden kann?
Offizielle Website der Okex-Handelsplattform-App
So lösen Sie nicht verfügbar
setInterval
Was sind Umgebungsvariablen?
So konvertieren Sie Ape in WAV
HTML-Online-Editor
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
