Во-первых, вам нужно иметь четкое представление о scope
и поведении ключевого слова this
в контексте scope
.
this
& amp; scope
:
there are two types of scope in javascript. They are :
1) Global Scope
2) Function Scope
вкратце, глобальная область относится к объекту window.Variables, объявленные в глобальной области, доступны из любого места. С другой стороны, область функций находится внутри функции .variable, объявленный внутри функции, не может быть доступен из внешнего мира в обычном режиме. this
ключевое слово в глобальной области относится к объекту window. Внутренняя функция this
также относится к объекту window.So this
всегда будет ссылаться на окно до тех пор, пока мы найдем способ манипулировать this
, чтобы указать контекст по собственному выбору.
--------------------------------------------------------------------------------
- -
- Global Scope -
- ( globally "this" refers to window object) -
- -
- function outer_function(callback){ -
- -
- // outer function scope -
- // inside outer function"this" keyword refers to window object - -
- callback() // "this" inside callback also refers window object -
- } -
- -
- function callback_function(){ -
- -
- // function to be passed as callback -
- -
- // here "THIS" refers to window object also -
- -
- } -
- -
- outer_function(callback_function) -
- // invoke with callback -
--------------------------------------------------------------------------------
Различные способы управления this
внутри функций обратного вызова:
Здесь У меня есть функция-конструктор, называемая Person. Он имеет свойство, называемое name
, и четыре метода, называемые sayNameVersion1
, sayNameVersion2
, sayNameVersion3
, sayNameVersion4
. Все четыре из них имеют одну конкретную задачу. Заберите обратный вызов и вызовите его. Обратный вызов имеет конкретную задачу, которая заключается в регистрации свойства имени экземпляра функции конструктора Person.
function Person(name){
this.name = name
this.sayNameVersion1 = function(callback){
callback.bind(this)()
}
this.sayNameVersion2 = function(callback){
callback()
}
this.sayNameVersion3 = function(callback){
callback.call(this)
}
this.sayNameVersion4 = function(callback){
callback.apply(this)
}
}
function niceCallback(){
// function to be used as callback
var parentObject = this
console.log(parentObject)
}
Теперь давайте создадим экземпляр из конструктора person и вызывать разные версии sayNameVersionX
(X относится к 1,2,3,4) методу с niceCallback
, чтобы увидеть, как много способов управления this
внутри обратного вызова ссылаться на person
.
var p1 = new Person('zami') // create an instance of Person constructor
Что нужно сделать, это создать новую функцию с ключевым словом this
, установленным на предоставленное значение.
sayNameVersion1
и sayNameVersion2
используют bind для управления this
функции обратного вызова.
this.sayNameVersion1 = function(callback){
callback.bind(this)()
}
this.sayNameVersion2 = function(callback){
callback()
}
сначала связывают this
с обратным вызовом внутри самого метода. для второго обратного вызова передается связанный с ним объект.
p1.sayNameVersion1(niceCallback) // pass simply the callback and bind happens inside the sayNameVersion1 method
p1.sayNameVersion2(niceCallback.bind(p1)) // uses bind before passing callback
first argument
в call
используется как функция this
внутри функции, которая вызывается с call
, прикрепленной к ней.
sayNameVersion3
использует call
для управления this
], чтобы ссылаться на созданный нами объект person, а не на объект окна.
this.sayNameVersion3 = function(callback){
callback.call(this)
}
и он называется следующим:
p1.sayNameVersion3(niceCallback)
Как и в call
, первый аргумент apply
относится к объекту, который будет обозначен ключевым словом this
.
sayNameVersion4
использует apply
для манипулирования this
для обращения к объекту человека
this.sayNameVersion4 = function(callback){
callback.apply(this)
}
, и он называется следующим. Просто передается обратный вызов,
p1.sayNameVersion4(niceCallback)
Backticks (`
) используются для определения шаблонных литералов.
Особенности:
Примечание: мы можем легко использовать одинарные кавычки ('
) и двойные кавычки ("
) внутри обратных шагов (`
) .
Пример:
var nameStr = `I'm "Rohit" Jindal`;
Чтобы интерполировать переменные или выражение, мы можем использовать обозначение ${expression}
для этого.
var name = 'Rohit Jindal';
var text = `My name is ${name}`;
console.log(text); // My name is Rohit Jindal
Multi-line Строки означают, что вам больше не нужно использовать \n
для новых строк.
Пример:
const name = 'Rohit';
console.log(`Hello ${name}!
How are you?`);
Выход:
Hello Rohit!
How are you?
ES6 предлагает новый тип строкового литерала, используя обратный тик в качестве разделителя. Эти литералы позволяют встроить встроенные интерполяционные выражения строки, которые затем автоматически анализируются и оцениваются.
let person = {name: 'RajiniKanth', age: 68, greeting: 'Thalaivaaaa!' };
let usualHtmlStr = "<p>My name is " + person.name + ",</p>\n" +
"<p>I am " + person.age + " old</p>\n" +
"<strong>\"" + person.greeting +"\" is what I usually say</strong>";
let newHtmlStr =
`<p>My name is ${person.name},</p>
<p>I am ${person.age} old</p>
<p>"${person.greeting}" is what I usually say</strong>`;
console.log(usualHtmlStr);
console.log(newHtmlStr);
Как вы можете видеть, мы использовали `
вокруг ряда символов, которые интерпретируются в качестве строкового литерала, но любые выражения формы ${..}
анализируются и оцениваются в строке сразу.
Одно действительно приятное преимущество интерполированных строковых литералов заключается в том, что им разрешено разбивать несколько строк:
var Actor = {"name" : "RajiniKanth"};
var text =
`Now is the time for all good men like ${Actor.name}
to come to the aid of their
country!`;
console.log( text );
// Now is the time for all good men
// to come to the aid of their
// country!
Интерполированные выражения
Любое допустимое выражение разрешено появляться внутри ${..}
в интерполированном строковом литерале, включая вызовы функций, вызовы выражения встроенной функции и даже другие интерполированные строковые литералы!
function upper(s) {
return s.toUpperCase();
}
var who = "reader"
var text =
`A very ${upper( "warm" )} welcome
to all of you ${upper( `${who}s` )}!`;
console.log( text );
// A very WARM welcome
// to all of you READERS!
Здесь внутренний `${who}s`
интерполированный строковый литерал был немного приятнее для нас при объединении переменной who с строкой "s"
, в отличие от who + "s"
. Кроме того, чтобы сохранить примечание, интерполированный строковый литерал просто лексически ограничен, где он появляется, но не динамически ограничен каким-либо образом
function foo(str) {
var name = "foo";
console.log( str );
}
function bar() {
var name = "bar";
foo( `Hello from ${name}!` );
}
var name = "global";
bar(); // "Hello from bar!"
Использование литерала шаблона для HTML, безусловно, более читаемо, уменьшая раздражение.
Простой старый способ:
'<div class="' + className + '">' +
'<p>' + content + '</p>' +
'<a href="' + link + '">Let\'s go</a>'
'</div>';
С ES6:
`<div class="${className}">
<p>${content}</p>
<a href="${link}">Let's go</a>
</div>`
Литералы с метками шаблонов
Мы также можем пометить строку шаблона, когда тега шаблона помечена, литералы и подстановки передаются функции, которая возвращает результирующее значение.
]function myTaggedLiteral(strings) {
console.log(strings);
}
myTaggedLiteral`test`; //["test"]
function myTaggedLiteral(strings,value,value2) {
console.log(strings,value, value2);
}
let someText = 'Neat';
myTaggedLiteral`test ${someText} ${2 + 3}`;
//["test", ""]
// "Neat"
// 5
Мы можем использовать оператор спреда здесь, чтобы передать несколько значений. Первый аргумент - мы называем его строками - это массив всех простых строк (материал между любыми интерполированными выражениями).
, мы затем собираем все последующие аргументы в массив, называемый значения, используя ... gather/rest operator
, хотя вы могли бы, конечно, оставить их как индивидуальные именованные параметры, следуя параметру строк, как это было сделано выше (value1, value2 etc)
.
function myTaggedLiteral(strings,...values) {
console.log(strings);
console.log(values);
}
let someText = 'Neat';
myTaggedLiteral`test ${someText} ${2 + 3}`;
//["test", ""]
// "Neat"
// 5
Аргумент (ы), собранный в наши значения array - это результаты уже оцененных интерполяционных выражений, найденных в строковом литерале. Идентифицированный строковый литерал похож на этап обработки после вычисления интерполяций, но до того, как окончательное значение строки будет скомпилировано, что позволит вам более эффективно управлять строкой из литерала. Давайте посмотрим на пример создания повторно используемых шаблонов.
const Actor = {
name: "RajiniKanth",
store: "Landmark"
}
const ActorTemplate = templater`<article>
<h3>${'name'} is a Actor</h3>
<p>You can find his movies at ${'store'}.</p>
</article>`;
function templater(strings, ...keys) {
return function(data) {
let temp = strings.slice();
keys.forEach((key, i) => {
temp[i] = temp[i] + data[key];
});
return temp.join('');
}
};
const myTemplate = ActorTemplate(Actor);
console.log(myTemplate);
Raw Strings
наши функции тега получают первый аргумент, который мы назвали строками, который является массивом. Но есть дополнительный бит данных: необработанные необработанные версии всех строк. Вы можете получить доступ к этим исходным строковым значениям, используя свойство .raw
, например:
function showraw(strings, ...values) {
console.log( strings );
console.log( strings.raw );
}
showraw`Hello\nWorld`;
Как вы можете видеть, необработанная версия строки сохраняет escape-последовательность \n
, а обработанная версия строки ссылается на него как на неэксклюзивную новую новую строку. ES6 поставляется со встроенной функцией, которая может использоваться как тег строкового литерала: String.raw(..)
. Он просто проходит через исходные версии строк:
console.log( `Hello\nWorld` );
/* "Hello
World" */
console.log( String.raw`Hello\nWorld` );
// "Hello\nWorld"
myTaggedLiteral`test ${someText} ${2 + 3}`;
должны быть //["test ", " "]
(т. Е. Не обрезаны строки).
– Michael Krebs
11 February 2017 в 13:11
Это функция ECMAScript 6, называемая литералами шаблонов строк.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
Литералы шаблонов могут использоваться многострочные линии и могут использовать «интерполяцию» для вставки содержимого переменных :
var a = 123, str = `---
a is: ${a}
---`;
console.log(str);
Будет выводиться:
---
a is: 123
---
Что более важно, они могут содержать не только имя переменной, но и любое выражение Javascript:
var a = 3, b = 3.1415;
console.log(`PI is nearly ${Math.max(a, b)}`);
Поддерживается с Firefox 34 и Chrome 41.
["a", "b"].join(""); // both string elements written in new lines
. Но кроме этого можно использовать «транспилер», как Babel для преобразования ES6 + в ES5
– try-catch-finally
7 July 2016 в 19:29
alert`1`
.
– K._
29 July 2016 в 20:59
Backticks заключают литералы шаблонов, p.k.a. Шаблоны. Литералы шаблонов являются строковыми литералами, которые позволяют встроенные выражения и функции интерполяции строк.
Литералы шаблонов имеют выражения, вложенные в заполнители, обозначенные знаком доллара и фигурными скобками вокруг выражения, то есть ${expression}
. Заполнитель / выражения передаются функции. Функция по умолчанию просто конкатенирует строку.
Чтобы избежать обратного хода, поставьте перед ним обратную косую черту:
`\`` === '`'; => true
Используйте обратные элементы для более легкой записи многострочной строки:
console.log(`string text line 1
string text line 2`);
или
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);
vs. vanilla JS:
console.log('string text line 1\n' +
'string text line 2');
или
console.log('Fifteen is ' + (a + b) + ' and\nnot ' + (2 * a + b) + '.');
Последовательности выхода:
\u
, например \u00A9
\u{}
, например \u{2F804}
\x
, например \xA9
\
и (a), например \251