Ключевое слово this — один из самых сложных механизмов в JavaScript. Это специальное ключевое слово, которое автоматически определяется в рамках всех функций. Привязка this всегда была очень запутанной вещью, и даже опытным разработчикам иногда трудно понять, на что она указывает.
При вызове функции создается活动记录(иногда называют执行上下文). Эта запись будет содержать информацию о том, где была вызвана функция (стек вызовов), как была вызвана функция, какие параметры были переданы и т. д.thisЭто один из атрибутов записи (контекста), который будет использоваться во время выполнения функции.
1. Смысл этого
это всегда указывает на执行时из当前对象.
JavaScript this всегда указывает на объект, и на какой объект он указывает, определяется во время выполнения на основеСреда выполнения функции динамически связана, а не среда, в которой функция была объявлена.
То есть привязка this не имеет ничего общего с позицией объявления функции, толькоЗависит от того, как функция вызывается.
Помимо использования with и eval, часто используемые можно разделить на следующие:
- Вызывается как метод объекта.
- Вызывается как обычная функция.
- Вызов конструктора.
- Вызов Function.prototype.call или Function.prototype.apply.
1. При вызове метода объекта
Когда вызывается метод объекта, this относится к объекту.
var obj = {
a: 1,
getA() {
alert ( this === obj ); // 输出:true alert ( this.a ); // 输出: 1
}
};
obj.getA();
2. Вызывается как обычная функция
Когда функция вызывается не как свойство объекта, что мы часто называем обычным методом функции, this в это время всегда указывает на глобальный объект.
Обратите внимание, что метод объектаВыполнить после копирования отдельно, то в оригинале это будет丢失, который становится указателем на глобальный объект
//在浏览器的JavaScript 里，这个全局对象是window 对象。
window.name = 'globalName';
var getName = function(){
return this.name;
};
console.log( getName() ); // 输出：globalName
//或者：
window.name = 'globalName';
var myObject = {
name: 'sven',
getName: function(){
return this.name;
}
};
var getName = myObject.getName;
console.log( getName() ); // globalName
3. Вызов конструктора
Обычно this в конструкторе указывает на возвращаемый объект;
- Если конструктор явно не возвращает какие-либо данные или возвращает данные необъектного типа, это указывает на возвращаемый объект;
- Если конструктор явно возвращает объект, результат создания экземпляра вернет этот объект, а не этот;
//构造器里的this 就指向返回的这个对象，见如下代码：
var MyClass = function(){
this.name = 'sven';
};
var obj = new MyClass();
alert ( obj.name ); // 输出：sven
var MyClass = function(){
this.name = 'sven';
return { // 显式地返回一个对象
name: 'anne'
}
};
var obj = new MyClass();
alert ( obj.name ); // 输出：anne
var MyClass = function(){
this.name = 'sven'
return 'anne'; // 返回string 类型
};
var obj = new MyClass();
alert ( obj.name ); // 输出：sven
4. Позвоните или примените вызов
применить и вызов может динамически изменить это входящей функции
var obj1 = {
name: 'sven',
getName: function(){
return this.name;
}
};
var obj2 = {
name: 'anne'
};
console.log( obj1.getName() ); // 输出: sven
console.log( obj1.getName.call( obj2 ) ); // 输出：anne
2. Звоните, применяйте и связывайте
Введение и разница
Функция вызова и применения точно такая же, разница находится только в форме пропущенных параметров.
apply
applyПринимает два аргумента, первый аргумент определяет тело функциональных точек к этому объекту, второй параметр является набором индексации, этот набор может быть массивом, это может быть类数组.
Подобный массиву:
- Сам объект должен иметь доступ к свойствам;
- Свойство length объекта доступно для чтения и записи.
call
callКоличество передаваемых параметров не фиксировано.Первый параметр также представляет собой указатель this в теле функции.Начиная со второго параметра, каждый параметр передается в функцию по очереди.
bind
bindТип параметра такой же, как у call, но он не выполняет функцию, а возвращает новую функцию после изменения этого
var func = function( a, b, c ){
alert ( [ a, b, c ] );
};
func.apply( null, [ 1, 2, 3 ] );
func.call( null, 1, 2, 3 );
Передаватьapplyфункция
Function.prototype.apply = function (context) {
var context = context || window;
var args = arguments[1] || [];
context.fn = this;
var result = context.fn(...args);
delete context.fn;
return result;
}
callа такжеbindупакован вapplyнад语法糖:
Function.prototype.call = function( context ){
var argus = [];
for (var i = 1; i < arguments.length; i++) {
argus.push(arguments[i]);
}
this.apply(context, argus);
};
Function.prototype.bind = function( context ){
var self = this; // 保存原函数
// 返回一个新的函数
return function(){
// 执行新的函数的时候，会把之前传入的 context // 当作新函数体内的 this
return self.apply( context, arguments );
}
};
использовать
- измените это, чтобы указать на
-
Заимствуя другие объекты:существует
操作类数组(например, аргументы), вы можете найти объект Array.prototype, чтобы позаимствовать методArray.prototype.push.call(a, 'first' )
3. оценка и с
Лексическая область определяется тем, где функции объявляются во время написания кода, а eval и with могут изменять лексическую область во время выполнения.
eval(..) и with изменят или создадут новые области во время выполнения, чтобы обмануть другие слова, определенные во время записи правовая сфера. Похоже, что они обеспечивают более сложную функциональность, а код более расширяемый.
Однако эти функции устарели и имеют низкую производительность. Неправильное использование может легко привести к непредвиденным проблемам. Они больше не рекомендуются и будут ограничены и запрещены в строгом режиме.не используйте их легкомысленно.
eval
Функция eval(..) может принимать строку в качестве аргумента и обрабатывать ее содержимое как код, который существует в этой точке программы на момент ее написания. Другими словами, вы можете программно генерировать код в коде, который вы пишете, и запускать его, как если бы код был написан в этом месте.
function foo(str, a) {
eval( str );
console.log( a, b );
}
var b = 2;
foo( "var b = 3;", 1 ); // 1, 3
// 相当于
function foo(str, a) {
var b = 3;
console.log( a, b );
}
Содержимое строки может бытьДинамически генерируемый код функции.
В JavaScript есть и другие функции, которые работают аналогично eval(..).setTimeout,setIntervalПервым параметром может быть строка.
with
with может изменить область действия и часто используется как ярлык для многократного обращения к нескольким свойствам одного и того же объекта без необходимости многократного обращения к самому объекту.
var obj = {
a: 1,
b: 2,
c: 3
};
// 单调乏味的重复 "obj"
obj.a = 2;
obj.b = 3;
obj.c = 4;
// 简单的快捷方式
with (obj) {
a = 3;
b = 4;
c = 5;
}
представление
Плохая производительность eval и с
Двигатель JavaScript выполняет несколько оптимизаций производительности во время фазы компиляции. Некоторые из этих оптимизаций полагаются на возможность статически проанализировать лексику природы кода и предопределите, где все переменные и функции определены для быстрого поиска идентификаторов во время выполнения.
Но если движок найдет в коде eval(..) или with, он не сможет точно узнать, какой код получит eval(..) на этапе лексического анализа, как этот код изменит область видимости, и не сможет зная, что передать Что именно является содержимым объекта, который используется для создания новой лексической области.
Поэтому, если использовать в больших количествах, это приведет к плохой работе.