Функции стрелок были созданы для упрощения функции scope
и решения ключевого слова this
, упростив ее. Они используют синтаксис =>
, который выглядит как стрелка.
Примечание: он не заменяет существующие функции. Если вы замените каждый синтаксис функций на функции со стрелками, он не будет работать во всех случаях.
Давайте посмотрим на существующий синтаксис ES5. Если ключевое слово this
находилось внутри метода объекта (функция который принадлежит объекту), к чему это относится?
var Actor = {
name: 'RajiniKanth',
getName: function() {
console.log(this.name);
}
};
Actor.getName();
Вышеприведенный фрагмент ссылается на object
и печатает имя "RajiniKanth"
. Давайте рассмотрим нижеприведенный фрагмент и посмотрим, что здесь будет здесь.
var Actor = {
name: 'RajiniKanth',
movies: ['Kabali', 'Sivaji', 'Baba'],
showMovies: function() {
this.movies.forEach(function(movie) {
alert(this.name + " has acted in " + movie);
});
}
};
Actor.showMovies();
. А теперь, если ключевое слово this
находилось внутри method’s function
?
Здесь это будет означать window object
, чем inner function
, как его выпавшее из scope
. Поскольку this
всегда ссылается на владельца функции, в которой он находится, для этого случая - поскольку он теперь выходит из области видимости - объект window / global.
Когда он находится внутри object
's метод - владелец function
является объектом. Таким образом, это ключевое слово привязано к объекту. Однако, когда он находится внутри функции, как автономной, так и внутри другого метода, она всегда будет ссылаться на объект window/global
.
var fn = function(){
alert(this);
}
fn(); // [object Window]
Есть способы решить эту проблему в нашем ES5
сам, рассмотрим, что перед тем, как погрузиться в функции ES6 arrow, как решить проблему.
Как правило, вы должны создать переменную вне внутренней функции метода. Теперь метод ‘forEach’
получает доступ к this
и, следовательно, к свойствам object’s
и их значениям.
var Actor = {
name: 'RajiniKanth',
movies: ['Kabali', 'Sivaji', 'Baba'],
showMovies: function() {
var _this = this;
this.movies.forEach(function(movie) {
alert(_this.name + " has acted in " + movie);
});
}
};
Actor.showMovies();
, используя bind
, чтобы прикрепить ключевое слово this
, которое ссылается на метод method’s inner function
.
var Actor = {
name: 'RajiniKanth',
movies: ['Kabali', 'Sivaji', 'Baba'],
showMovies: function() {
this.movies.forEach(function(movie) {
alert(_this.name + " has acted in " + movie);
}).bind(this);
}
};
Actor.showMovies();
Теперь с помощью функции стрелки ES6
мы можем более эффективно решить проблему lexical scoping
.
var Actor = {
name: 'RajiniKanth',
movies: ['Kabali', 'Sivaji', 'Baba'],
showMovies: function() {
this.movies.forEach((movie) => {
alert(this.name + " has acted in " + movie);
});
}
};
Actor.showMovies();
Arrow functions
больше похожи на операторы функций, за исключением того, что они bind
это parent scope
. Если аргумент arrow function is in top scope
, this
будет ссылаться на window/global scope
, тогда как функция стрелки внутри регулярной функции будет иметь свой этот аргумент так же, как и внешнюю функцию.
С функциями arrow
this
привязан к закрытию scope
во время создания и не может быть изменен. Новый оператор, bind, call и apply не влияют на это.
var asyncFunction = (param, callback) => {
window.setTimeout(() => {
callback(param);
}, 1);
};
// With a traditional function if we don't control
// the context then can we lose control of `this`.
var o = {
doSomething: function () {
// Here we pass `o` into the async function,
// expecting it back as `param`
asyncFunction(o, function (param) {
// We made a mistake of thinking `this` is
// the instance of `o`.
console.log('param === this?', param === this);
});
}
};
o.doSomething(); // param === this? false
В приведенном выше примере мы потеряли контроль над этим. Мы можем решить приведенный выше пример, используя переменную ссылку this
или используя bind
. С ES6 становится легче управлять this
в качестве привязки к lexical scoping
.
var asyncFunction = (param, callback) => {
window.setTimeout(() => {
callback(param);
}, 1);
};
var o = {
doSomething: function () {
// Here we pass `o` into the async function,
// expecting it back as `param`.
//
// Because this arrow function is created within
// the scope of `doSomething` it is bound to this
// lexical scope.
asyncFunction(o, (param) => {
console.log('param === this?', param === this);
});
}
};
o.doSomething(); // param === this? true
Внутри литерала объекта.
var Actor = {
name: 'RajiniKanth',
movies: ['Kabali', 'Sivaji', 'Baba'],
getName: () => {
alert(this.name);
}
};
Actor.getName();
Actor.getName
определяется функцией стрелки, но при вызове он оповещает о неопределенности, поскольку this.name
является undefined
, поскольку контекст остается в window
.
Это происходит потому, что функция стрелки связывает контекст лексически с внешним окружением window object
... i.e. Выполнение this.name
эквивалентно window.name
, которое не определено.
Прототип объекта
Это же правило применяется при определении методов на prototype object
. Вместо использования функции-стрелки для определения метода sayCatName, который приводит к некорректному context window
:
function Actor(name) {
this.name = name;
}
Actor.prototype.getName = () => {
console.log(this === window); // => true
return this.name;
};
var act = new Actor('RajiniKanth');
act.getName(); // => undefined
Конструкторы Invoke
this
в вызове построения - это вновь созданный объект , При выполнении нового Fn () контекст constructor Fn
является новым объектом: this instanceof Fn === true
.
this
настроен из охватывающего контекста, то есть внешней области, которая делает ее не назначенной вновь созданному объекту.
var Message = (text) => {
this.text = text;
};
// Throws "TypeError: Message is not a constructor"
var helloMessage = new Message('Hello World!');
Обратный вызов с динамическим контекстом
Функция Arrow связывает декларацию context
статически и не может сделать ее динамической. Присоединение прослушивателей событий к элементам DOM является общей задачей при программировании на стороне клиента. Событие запускает функцию обработчика с этим в качестве целевого элемента.
var button = document.getElementById('myButton');
button.addEventListener('click', () => {
console.log(this === window); // => true
this.innerHTML = 'Clicked button';
});
this
- это окно в функции стрелки, которая определена в глобальном контексте. Когда происходит событие клика, браузер пытается вызвать функцию обработчика с контекстом кнопки, но функция стрелки не изменяет свой предварительно определенный контекст. this.innerHTML
эквивалентен window.innerHTML
и не имеет смысла.
Вы должны применить выражение функции, которое позволяет изменить это в зависимости от целевого элемента:
var button = document.getElementById('myButton');
button.addEventListener('click', function() {
console.log(this === button); // => true
this.innerHTML = 'Clicked button';
});
Когда пользователь нажимает кнопку, это в функции обработчика является кнопкой. Таким образом, this.innerHTML = 'Clicked button'
корректно изменяет текст кнопки, чтобы отразить статус щелчка.
Ссылки: https://rainsoft.io/when-not-to-use-arrow-functions-in-javascript/
Главным виновником здесь являются браузеры, а не PHP. Они хранят данные по доменам и не знают, что www
- это особый случай; с их точки зрения, www.mydomain.com
и mydomain.com
представляют собой разные строки и, следовательно, имеют разные политики безопасности. Однако есть кое-что, что можно сделать.
При установке файла cookie используйте .mydomain.com
(с начальной точкой). Это сообщит браузеру вашего пользователя, что файл cookie доступен для mydomain.com
и всех поддоменов, включая www
. PHP setcookie имеет аргумент $ domain
, но он пятый в списке, поэтому вам может потребоваться установить $ expire
и $ path
к их значениям по умолчанию, чтобы добраться до него.
setcookie('name', 'value', time()+3600, '/', '.mydomain.com');
Однако для обеспечения единообразия вы можете рассмотреть возможность перенаправления всего веб-трафика на конкретный домен, т. Е. Отправить трафик mydomain.com
на www.mydomain.com
или наоборот. наоборот. Мои смутные знания о SEO (отредактируйте, если неверно) говорят мне, что это полезно, чтобы не иметь дублированного контента, и избавляет вас от всех таких проблем с аутентификацией. Кроме того, если вы храните ресурсы на субдомене, наличие файлов cookie на нем замедляет трафик, поскольку его приходится каждый раз транспортировать, поэтому сохранение файлов cookie приложений только на www
дает вам такой прирост скорости.
Вот руководство о том, как выполнить такое перенаправление в Apache.
Я считаю, что вы можете установить файл cookie на example.com (на самом деле .example.com), и он будет отправлен, если они перейдут на www.example.com , но не наоборот. Эта стандартная политика безопасности предназначена для предотвращения отправки личных данных пользователей на непредусмотренные серверы.
Лично я использую виртуальные хосты в моем apache2.conf:
<VirtualHost *:80>
ServerName example.com
RedirectMatch (.*) http://www.example.com$1
</VirtualHost>
... в этом примере все, кто пытается загрузить, например http://example.com/index.html перенаправляется на http://www.example.com/index.html .
setcookie("CookieName", "value", time()+3600, "/", ".mydomain.com");
, потому что php переводит www.mydomain.com иначе, чем mydomain.com. Если домены не идентичны на 100%, cookie не будет совпадать.
И я уверен, что браузер также ищет 100% совпадение доменного имени, прежде чем разрешить серверам перезаписать его.
Просто используйте .htaccess для перенаправления. Это единственный НАДЕЖНЫЙ способ решить эту проблему во всех браузерах.