Неизвестный синтаксис машинописного машиностроения, найденный по Угловому коду [дубликат]

Во-первых, вам нужно иметь четкое представление о 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

bind:

Что нужно сделать, это создать новую функцию с ключевым словом 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)

apply:

Как и в call, первый аргумент apply относится к объекту, который будет обозначен ключевым словом this.

sayNameVersion4 использует apply для манипулирования this для обращения к объекту человека

this.sayNameVersion4 = function(callback){
    callback.apply(this)
}

, и он называется следующим. Просто передается обратный вызов,

p1.sayNameVersion4(niceCallback)

154
задан Bergi 3 December 2015 в 02:12
поделиться

5 ответов

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?
13
ответ дан Dev 22 August 2018 в 01:07
поделиться

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>`
  • Ваша строка может охватывать несколько строк.
  • Вам не нужно скрывать символы котировки.
  • Вы можете избежать группировок, таких как: '">'
  • Вам не нужно использовать оператор plus.

Литералы с метками шаблонов

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

]
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"
80
ответ дан RamenChef 22 August 2018 в 01:07
поделиться
  • 1
    Отличный ответ! Незначительный комментарий в разделе «Литералы с метками шаблонов», я считаю, что два примера выходов массива для myTaggedLiteral`test ${someText} ${2 + 3}`; должны быть //["test ", " "] (т. Е. Не обрезаны строки). – Michael Krebs 11 February 2017 в 13:11
  • 2
    Супер информативный. Благодаря! – GollyJer 27 August 2017 в 16:59
  • 3
    +1 для RajiniKanth, моего любимого супергероя. На самом деле он самый сильный и крутой супергерой всех времен во всей мультиверсии. Кто не верит, должен проверить YouTube. – Ska 12 October 2017 в 08:18
  • 4
    @Ska: Магижчи. – Thalaivar 22 October 2017 в 16:38

Это функция 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.

159
ответ дан try-catch-finally 22 August 2018 в 01:07
поделиться
  • 1
  • 2
    Существуют ли какие-либо жизнеспособные полифилы для этого из-за отсутствия поддержки для этого? – Alexander Dixon 7 July 2016 в 18:16
  • 3
    @AlexanderDixon, вы не можете полиполивать эту функцию языка в классическом смысле, хотя вы можете использовать шаблоны из Underscore или lodash для переменных в строках в сочетании с многострочными строками, используя массивы: ["a", "b"].join(""); // both string elements written in new lines. Но кроме этого можно использовать «транспилер», как Babel для преобразования ES6 + в ES5 – try-catch-finally 7 July 2016 в 19:29
  • 4
    Не поддерживается в Internet Explorer, к сожалению! Я бы не рекомендовал их использовать, если вам нужна хорошая поддержка кросс-браузера – UnionP 28 July 2016 в 23:23
  • 5
    Tagged шаблоны литералов с использованием обратных ссылок! Это действительно и хорошо работает: 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) + '.');

Последовательности выхода:

  • Эскапады Unicode начинаются с \u, например \u00A9
  • Эскизы кодовой точки Unicode, обозначенные \u{}, например \u{2F804}
  • Шестнадцатеричные escape-последовательности, начатые с помощью \x, например \xA9
  • Octal буквальные escape-последовательности, начатые символами \ и (a), например \251
3
ответ дан Xufox 22 August 2018 в 01:07
поделиться
0
ответ дан Peter Mortensen 4 November 2018 в 23:34
поделиться
Другие вопросы по тегам:

Похожие вопросы: