Дело в том, что js довольно запутанный, иногда легко ошибиться, на кого это указывает.
Есть два ключевых момента
: 1. это всегда выполняется как текущая среда выполнения.
2. Смысл этого зависит от того, как вызывается функция
в глобальном контексте выполнения.
console.log(this == window); // true
var b = 20;
console.log(window.b); //20
this.add = (a,b) =>{
return a+b
}
window.add(5,5) //10
Мы можем видеть из кода выше. В глобальной переменной var == this.== window.;
контекст функции.
Зависит от того, как функция вызывается.
Вызывается непосредственно в глобальном
function foo(){
return this;
}
console.log(foo() == window) //true
Это по-прежнему указывает на окно
, связанное с объектом для вызова call, apply.
let obj = {
name:'lly',
age:20,
}
function gud(){
return this.name+':'+this.age
}
console.log(gud.call(obj)) //lly:20
console.log(gud.apply(obj)) //lly:20
вызов и применение изменить указание this, от указания на окно до использования
в конструкторе объекта obj
function myobj(name,age){
this.name = name;
this.age = age;
this.say = function(){
return `我叫${
this.name}，今年${
this.age}`
}
}
let lly = new myobj('lly',22);
console.log(lly.say) //我叫lly，今年22
Конструктор указывает на текущий новый объект.
Процесс создания нового
1. Создайте пустой объект.
2. Укажите это на этот пустой объект.
3. Назначьте свойства и методы.
4. Верните это.
используется в методах объекта
let obj ={
name:'lly',
age:40,
says:function(){
return this.name+':'+this.age
}
}
console.log(obj.says()) // lly:40
Когда функция вызывается, она указывает на текущую функцию, ну и что, если функция в объекте заменена стрелочной функцией.
var name = '全局';
var age=20;
let obj ={
name:'lly',
age:40,
says:() =>{
return this.name+':'+this.age
}
}
console.log(obj.says()) //全局:20
Волшебным образом обнаружится, что this снова указывает на глобальную, потому что у самой стрелочной функции этого нет.
Использование на узлах Dom
$('.btn').click(function(){
console.log(this);
})
document.getElementById('btn').onclick = function(){
console.log(this);
}
<button onclick="console.log(this);">点我</button>
это указывает на узел элемента DOM.
Резюме
Оценка направления this и направление this определяется при вызове функции.Вы можете судить о том, является ли это стрелочной функцией
в соответствии с последовательностью . Оценивая, существует ли поведение для изменения указателя, вызов apply bind оценивает контекст выполнения, в котором он находится.
----------------------------- Ручная сегментация ------------------------------------
Прочитав js, который вы не знаете, сделайте запись и сравните прирост записи.
Несколько правил привязки этого
1. Привязка по умолчанию
function wait(){
console.log(this.a);
}
var a = 2;
wait(); // 2
this в приведенном выше коде указывает на глобальную переменную a, а привязка по умолчанию связывает this с глобальным объектом, поэтому она указывает на глобальный объект. В соответствии с местоположением вызова, как упоминалось ранее, местоположение вызова вызывается в глобальном контексте, поэтому его можно увидеть из этого.
Следует отметить, что в строгом режиме это не имеет ничего общего с тем, где вызывается wait():
2. Неявное связывание
function add(){
console.log(this.a+this.b);
}
let objs = {
a:1,
b:2,
add:add
}
objs.add(); // 打印 3
Выше мы видим, что мы ссылаемся на метод add на свойство объекта obj по ссылке, когда мы
вызываем его через objs.add, мы обнаружим, что это указывает на наши objs. Это неявная привязка,
**Неявная потеря: **При использовании неявной привязки она может быть потеряна как неявная привязка.
function add(){
console.log(this.a);
}
let objs = {
a:10,
add:add
}
let objd = objs.add;
objs.add(); // 10
objd(); // undefined
То, что неявно связано с objs, является просто ссылкой, и она остается ссылкой при повторном использовании. Привязки без этого станут привязками по умолчанию. Так что это не определено;
3. Явное связывание (жесткое связывание)
. Это также два вызова и применения, о которых мы упоминали выше, чтобы изменить направление this, которое называется явным связыванием, потому что мы можем видеть, что этот метод изменил направление this.
function add(){
console.log(this.x+this.y);
}
let objs = {
x:1,
y:2
}
add.apply(objs) //3
Об этом уже упоминалось выше, поэтому давайте вкратце поговорим об этом. Apply изменяет точку добавления в objs. К сожалению, явное связывание по-прежнему не решает проблему отсутствия связывания, о которой мы говорили ранее. Метод
жесткой привязки
function add(y){
console.log(this.x + y);
}
let objs = {
x:5
}
let bar = add.bind(objs);
bar(10); //15
bind(…) возвращает жестко закодированную новую функцию, которая устанавливает аргумент в качестве контекста this и вызывает исходную функцию.
4.
Процесс привязки нового к новому Я думаю всем известно, что
там половина действий по модификации этого в середине.
function foo(a) {
this.a = a;
}
var bar = new foo(2);
console.log( bar.a ); // 2
Когда мы вызываем foo(…) с new, мы создаем новый объект и привязываем его к this в вызове foo(…)
. new — это последний метод, который может повлиять на поведение этой привязки при вызове функции, мы называем его новой привязкой.
Если вы хотите определить привязку this к работающей функции, вам нужно найти место прямого вызова этой функции. После его нахождения
можно последовательно применить следующие четыре правила для определения объекта привязки this.
- называется новым? Привязать к вновь созданному объекту.
- Вызывается вызовом или применением (или привязкой)? Привязать к указанному объекту.
- вызывается объектом контекста? Привязать к этому объекту контекста.
- По умолчанию: привязывается к undefined в строгом режиме, в противном случае привязывается к глобальному объекту.