Обзор весеннего собеседования по набору персонала, верни это ~ [План JS]

JavaScript

在这里插入图片描述

Карта статьи идет первой:

在这里插入图片描述

1. Предварительное изучение этого 💭💭💭

1. Зачем использовать это?

Как лучше понять это, я думаю, нам нужно понять, какую проблему это решает в первую очередь. В процессе написания статьи я также читал некоторые статьи и блоги, написанные другими людьми, большинство из которых это то, что это такое, сценарий использования этого и смысл этого. Конечно, это некоторые из пунктов знаний, которые необходимо освоить. Но хотите задать вопрос, прежде чем мы начнем?

你知道javascript中为什么需要this吗？

Когда я увидел этот вопрос, я подумал, что это атрибут контекста выполнения, и он определяет, что указывать при его вызове, но если вы спросите меня прямо, зачем это нужно javascript, я не смогу повторить. Давайте разберемся

Давайте сначала посмотрим на следующий пример:

var person = {
  name:'jingda',
  age:'23',
  phone:'1234567',
  FuncHi: function() {
    //实现功能:打印出「你好，我是 jingda，今年 23 岁」
  },
  FuncBye: function() {
    //实现功能:打印出「再见，记得我叫 jingda ,我的电话是1234567
  }
}

Приведенный выше код определяет объект человека, который имеет три атрибута имени, возраста и телефона, а также два метода, FuncHi и FuncBye, каждый из которых реализует свои собственные функции. Мы видим, что в данный момент в двух методах не передаются никакие параметры, поэтому невозможно вывести свойства этого объекта.Когда мы пытаемся взять некоторые методы, такие как передача параметров, мы можем написать такой код:

var person = {
    ...
    FuncHi: function(name, age){
      console.log('你好，我是 ${name}，今年 ${age} 岁')
    },
    FuncBye: function(name, phone){
      console.log('再见，记得我叫 ${name} 我的电话是 ${phone}')
    }
    
	person.FuncHi(person.name, person.age)
	person.FuncBye(person.name, person.phone)

можно печатать на консоли

在这里插入图片描述

Хотя этот метод передачи параметров может реализовать функцию, но вы это знаете, когда используете его, он делает код очень глупым, например, вы можете увидеть код вызывающего процесса.

Поэтому мы пытаемся улучшить код при вызове.Мы можем передать человека в качестве параметра двум методам при вызове.Когда методу нужно использовать атрибуты человека, мы можем взять его сами. Таким образом, код меняется на это:

var person = {
    ...
    FuncHi: function(p){
      console.log('你好，我是 ${p.name}，今年 ${p.age} 岁')
    },
    FuncBye: function(p){
      console.log('再见，记得我叫 ${p.name} 我的电话是 ${p.phone}')
    }
	person.FuncHi(person);
	person.FuncBye(person);

Это кажется намного короче, чем предыдущий код, параметры.

Но код, который разработчикам может понадобиться больше, это

var person = {
    ...
    FuncHi: function(){
      console.log('你好，我是 ${this.name}，今年 ${this.age} 岁')
    },
    FuncBye: function(){
      console.log('再见，记得我叫 ${this.name} 我的电话是 ${this.phone}')
    }
	person.FuncHi();
	person.FuncBye();

Что ты имеешь в виду, говоря, что ты выбрасываешь это внезапно? На самом деле это скрытый первый параметр. Этот человек «становится» этим, когда вы вызываете person.FuncHi() . То есть параметры скрыты, и мы используемthis.эквивалентноperson.

Но это далеко не просто对象.OUT, он будет включать многие случаи, следующий разговор с Казахстаном.

2. Как вы это определяете?

Первое, что нужно понять, это что означает это «это» в javascript? Здесь я обращаюсь к объяснению на MDN и получаю результат:

это свойство контекста выполнения, которое будет использоваться во время выполнения. Обратите внимание, что указание полностью зависит от того, где оно было вызвано.

(Кстати, какое у меня может быть определение, простите...) Next:

2. Это указывает на 👉👉👉 в разных случаях

В этом разделе будет очень много таких сценариев использования, т.к. результаты выполнения под браузером и нодой могут не совпадать, поэтому здесь如果没有特殊说明，即运行在浏览器中。Вы также можете попробовать сами

1. Глобальный контекст

  • браузер

在这里插入图片描述

  • node
console.log(this) //{}

2. Контекст функции

В нестрогом режиме:

  • браузер

在这里插入图片描述Поскольку значение this не задается this, значение this по умолчанию указывает на глобальный объект, которым является окно в браузере.

  • node
function f() {
  return this;
}

console.log(f() === globalThis) //true
console.log(globalThis) //Object [global]

в строгом режиме

И браузер, и узел не определены:在这里插入图片描述

function f() {
  "use strict";
  return this;
}

console.log(f() === undefined) //true

Здесь, в строгом режиме, если значение this не установлено в среде выполнения, this останется неопределенным, как и в приведенном выше примере, f() вызывается напрямую, а не как свойство или метод объекта.

3. Конструктор

Когда функция используется в качестве конструктора, то есть когда используется ключевое слово new, this привязывается к создаваемому новому объекту. Сначала давайте посмотрим, как работает конструктор?

function constructorFun() {
  this.name = 'jingda'
  //当然你可以设置更多值

  //当函数具有返回对象的return语句时
  //该对象是new表达式的结果
  //否则，表达式的结果是当前绑定到this的对象
}

Ну вот я осознанно думаю над принципом реализации новинки:

1. Создайте новый пустой объект

2. Свяжите этот объект с объектом-прототипом

3. Этот объект привязан к этому

4. Если эта функция ничего не возвращает, она вернет это по умолчанию

Но новое ключевое слово, не все возвращаемые значения возвращаются без изменений. Если возвращаются типы undefined, null и basic, будет возвращен новый объект, и только при возврате объекта будет возвращено возвращаемое значение конструктора.

Что ж, новинка, продолжим это, взглянем на следующие два примера:

function C() {
  this.a = 37;
}
var o = new C();
console.log(o.a);//37
function C2() {
  this.a = 37;
  return {a:38};
}
o = new C2();
console.log(o.a);//38

Поскольку в C нет возвращаемого объекта, это созданный экземпляр, на который указывает, oa равно 37, а в C2, поскольку возвращаемый объект задается вручную в процессе вызова конструктора, объект по умолчанию, привязанный к this, отбрасывается, в на этот раз this указывает на объект, возвращаемый return, а oa равно 38.

4. Это в цепочке прототипов

Во-первых, общее понимание цепочки прототипов. JavaScript часто называют基于原型的语言- У каждого объекта есть объект-прототип, и объект берет свой прототип в качестве шаблона и наследует от прототипа методы и свойства. Объекты-прототипы также могут иметь прототипы и наследовать от них методы и свойства слой за слоем и так далее. Эту связь часто называют цепочкой прототипов.

Вот пример:

var o = {
  f: function() {
    return this.a + this.b;
  }
};
var p = Object.create(o);
p.a = 1;
p.b = 4;
console.log(p.f());//5

Мы создаем экземпляр объекта p, указав o в качестве объекта-прототипа через Object.create(o). Но у объекта p нет атрибута f, который унаследован от его прототипа, которым является o.

5. Объектные методы

Когда функция вызывается как метод для объекта, это устанавливается на объект, для которого был вызван метод функции. Назначение метода функции другому объекту изменит указатель this.

var obj = {
  name:"jing",
  foo: function () {
    return this.name;
  }
};
console.log(obj.foo()); //jing

Когда вызывается obj.foo(), это внутри функции будет привязано к объекту o.

Вопросы, требующие внимания!!

Давайте изменим приведенный выше код для простоты понимания:

var obj = {
  foo: function () {
    console.log(this)
  }
};
obj.foo();//指向obj
  • Когда функция используется как значение, а не как свойство или метод объекта
(obj.foo = function () {
  console.log(this);
})()
//指向全局
  • Когда метод, в котором находится this, не находится на первом уровне объекта, то он указывает только на объект текущего уровня и не наследует верхний уровень.
var a = {
  p: 'jing',
  b: {
    m: function() {
      console.log(this.p);
    }
  }
};
a.b.m() //undefined

Второй раз, когда метод a.b.m находится в объекте a, внутреннее this метода указывает не на a, а на a.b, если нам нужно вывести значение p:

var a = {
  b: {
    m: function() {
      console.log(this.p);
    },
    p: 'Hello'
  }
};
a.b.m() //'Hello'
  • При назначении метода внутри вложенного объекта переменной это все равно будет указывать на глобальный объект. Или приведенный выше пример, когда мы пишем:
var a = {
  b: {
    m: function() {
      console.log(this.p);
    },
    p: 'Hello'
  }
};
var hello = a.b.m;
hello() // undefined

В приведенном выше примере m — это метод внутри многоуровневого объекта, и если он назначен переменной hello, это указывает на объект верхнего уровня. Как решить эту проблему, может толькоm所在的对象Назначьте его приветствию, чтобы при его вызове указатель this не менялся.

var hello = a.b;
hello.m() // Hello

6. Как обработчик событий DOM

Когда функция используется в качестве обработчика событий, это указывает на элемент, вызвавший событие.

7. Это под функцией стрелки

Последнее, что я должен упомянуть, это вопрос функции стрелки об этом указании:

ES2015 представил стрелочные функции, которые не предоставляют собственную привязку this (значение this останется значением окружающего лексического контекста).

1. Стрелочная функция не имеет отдельного this, стрелочная функция не будет создавать свое this, а только наследует this от верхнего уровня собственной цепочки областей видимости. Итак, в приведенном ниже коде this внутри функции, переданной в setInterval, имеет то же значение, что и во внешней функции:

function Person(){
  this.age = 1;
  setInterval(() => {
    this.age++; //正确地指向 p 实例
  }, 1000);
}

var p = new Person();
console.log(p.age);

2. Строгий режим не выводит undefined

var f = () => { 'use strict'; return this; };
f() === window; // 或者 global

3. Используйте методы call() и apply() для вызова функции, можно передавать только параметры, и это не может быть привязано

var person = {
  age:18,
  sum: function(a) {
    var f = a => a + this.age;
    return f(a);
  },
  sumCall: function(a) {
    var f = a => a + this.age;
    var b = {
      age:20
    };
    return f.call(b,a)
    //call的第一个参数是需要绑定到的对象，上，如果成功的话，指向的b age为20，但是下面输出的是19，并没有绑定到b上
  }
}
console.log(person.sum(1));//19
console.log(person.sumCall(1));//19

Оба выхода равны 19, то есть в sumCall f.call(b,a) изначально хотел связать это с b, но не удалось.

3. На что обратить внимание при использовании 👊👊👊

1. Избегайте нескольких слоев этого (включая это в методах обработки массива)

Поскольку смысл этого неясен, постарайтесь не включать несколько слоев this в функцию:

var o = {
  name:'jing',
  f1: function() {
    console.log(this.name);
    var f2 = function () {
      console.log(this.name);
    }();
  }
}

o.f1()
//node 下执行
// jing
// undefined

Это в F2 теряется, указывая на общую ситуацию.

Если вы хотите избежать этого, вам нужно использовать переменную в f2, которая вместо этого указывает на внешний слой.


var o = {
  name:'jing',
  f1: function() {
    console.log(this.name);
    var that = this;
    var f2 = function() {
      console.log(that.name);
    }();
  }
}

o.f1()
//jing
//jing

2. Другой — это карта массива и методы foreach,

Разрешается указывать функцию в качестве параметра. Это не должно использоваться внутри этой функции. Это приведет к тому же явлению отсутствия this, что и выше.В следующем примере f может перейти к this для o, но this в методе forEach в f теряется, указывая на глобальную переменную. Следовательно, неопределенный.

var o = {
  v: 'hello',
  p: [ 'a1', 'a2' ],
  f: function f() {
    this.p.forEach(function (item) {
      console.log(this.v + ' ' + item);
    });
  }
}

o.f()
//node 下执行
// undefined a1
// undefined a2

вывести эту штуку в браузер? ? ?在这里插入图片描述

решение:

  • 1. Вам нужно использовать переменную, указывающую на внешний слой в forEach
f: function f() {
    var that = this;
    this.p.forEach(function (item) {
      console.log(that.v+' '+item);
    });
  }
  • 2. Используйте это как второй параметр метода foreach и исправьте его рабочую среду.
f: function f() {
    this.p.forEach(function (item) {
      console.log(this.v + ' ' + item);
    }, this);
  }

3. null undefined передается в call apply bind

function foo() {
  console.log(this.a);
}
var a = 2;
foo.call(null) //2

Параметр, переданный методом вызова здесь, равен нулю, и это указывает на глобальный (не определено в строгом режиме)

4. Протестируйте несколько вопросов (ответ в конце) ✍️✍️✍️

1. Связанный метод свойства объекта

const object = {
  message:'hello,world',
  getMessage() {
    const message = 'hello,earth';
    return this.message;
  }
};
console.log(object.getMessage());

Если вы незнакомы, вы можете увидеть случай 5. В это время вызывается this в объекте.

2. Цепочка прототипов

function Person(name) {
  this.name = name;
  this.getName = () => this.name;
}
const cat = new Person('jing');
console.log(cat.getName());
const { getName } = cat;
console.log(getName());

3, setTimeout () задержка, связанная

const object = {
  message:'hello world',

  logMessage() {
    console.log(this.message);
  }
};
setTimeout(object.logMessage,1000);

4. Функция стрелки, связанная

const object = {
  who: 'World',
 
  greet() {
    return `Hello, ${this.who}!`;
  },
 
  farewell: () => {
    return `Goodbye, ${this.who}!`;
  }
};
console.log(object.greet());   
console.log(object.farewell());

5. Укажите на окно

var length = 4;
function callback() {
  console.log(this.length);
}
const object = {
  length:5,
  method(callback) {
    callback();
  }
};
object.method(callback,1,2);

6. Последнее, что я видел два дня назад

var myObject = {
  foo:"bar",
  func:function() {
    var self = this;
    console.log(this.foo);
    console.log(self.foo);
    (function() {
      console.log(this.foo);
      console.log(self.foo);
    }());
  }
}
myObject.func();

在这里插入图片描述Ответ (вы можете запустить его самостоятельно)

1. привет, мир

2. Тихо

3. не определено

4, Привет, мир! Прощай, неопределенный!

5, 4 (браузер) не определено (узел), потому что у узла нет окна

6. бар бар неопределенный бар

Если у вас есть какие-либо вопросы, вы можете ответить в области комментариев, или вы можете проверить информацию самостоятельно и прочитать маленькую желтую книгу.

Ну, это здесь во-первых. Статья также является чтением книги, чтением блога, чтением заголовка и обобщением некоторых вещей, которые могут быть написаны не систематически. Может я не так понял, замечания и предложения приветствуются.

Я Цзин Да, младший, ваши предложения и лайки - самая большая поддержка для меня. 🙈

В настоящее время учится молча и ищет подходящие места для стажировки.Если у вас есть небольшой партнер для обучения, пожалуйста, добавьте меня wx: lj18379991972 💖💖💖

在这里插入图片描述

Ссылка на ссылку:

JavaScript, которого ты не знаешь(Читать книгу, этот раздел)

MDN this

учебник по JavaScript для веб-канала это ключевое слово

Голодная долина -- Зачем это в JS

Категории