Предисловие: меня всегда смущало указание этого в javascript,JavaScript, которого вы не знаете (Увеличение громкости)В этой книге 3 главы как раз об этом.Впервые прочитала в прошлом году и до сих пор чувствовала,что не поняла.Я до сих пор не понимаю,когда спрашивала поглубже.Ну, если вы хотите узнать больше об этом, эта книга — хороший выбор.

Теперь я кратко расскажу о своем понимании, и запомню смысл этого в javascript в двух предложениях:

указатель на это

1. Обычные функции указывают на вызывающую функцию: удобный способ — посмотреть, стоит ли точка перед функцией, если точка есть, то указать на значение перед точкой;

2, функция стрелки указывает на домен, в котором находится функция: обратите внимание на понимание области действия, только函数的{}сформировать масштаб,对象的{}а такжеif(){}ни один из них не является областью действия;

const obj = {
    name: 'objName',
    say() {
        console.log(this.name);
    },
    read: () => {
        console.log(this.name);
    }
}
obj.say(); // objName
obj.read(); // undefined

• Обычная функция, вызывающий объект — obj, поэтому результат — objname; также понятноsay()это обычная функция с битом впереди, поэтомуthisнаправлениеobj;
• Функция стрелки указывает на область, в которой находится функция, а текущая область — это глобальная среда, поэтомуthis.nameзаundefined,
• Возьмите следующий пример, чтобы лучше понять указатель стрелочной функции: Область, в которой находится стрелочная функция, является нормальной функцией.say,say()Вызывающий объект obj

const obj = {
    say: function () {
        setTimeout(() => {
            console.log(this)
        });
    }
}
obj.say(); // obj,此时this指的是定义他的obj

Дополнительные очки знаний

• По умолчанию это окно браузера

function test() {
    console.log(this);
}
test(); //window

• Глобальная среда по умолчанию в node.jsthis为{}, по умолчанию в обычных функцияхthis为global

console.log(this); // {}
function test() {
   console.log(this);
}
test(); //global

Приходите к двум вопросам, чтобы проверить, освоили ли вы это

example1

var length = 10;
function fn() {
 console.log(this.length);
}

const  obj = {
    length: 5,
    method: function(fn) {
        fn();
        arguments[0]();
    }
};

obj.method(fn, 1);

выход 10, 2

Я был сбит с толку, когда впервые увидел этот вопрос, но теперь я, наконец, понял его, метод Эта функция передает два параметра, один параметрfn(),fn()Это обычная функция, она указывает на вызывающую функцию и указывает на глобальную в данный момент (вы также можете видеть, что предыдущей функции нет).点), поэтому текущий результат равен 10,argumentsявляются всеми параметрами функции, объектом, подобным массиву, arguments[0](), который можно рассматривать как arguments.0(), вызывающий объект этой функцииarguments, в настоящее время это относится кarguments, это.длинаangument.length, - общее количество входящих параметров 2

Примечание:

• Результат приведенного выше примера, работающего в среде узла, не определен 2,var length = 10изменить наglobal.length = 10;Это связано с тем, что переменные, определенные в глобальной среде в среде узла, не будут привязаны к глобальной среде, и браузер также автоматически привяжется к окну глобальной среды.
• Я написал небольшую проблему раньше, спасибо за указание: используйте const для определения длины, а затем печатайте 0 и 2; переменные var, определенные глобально, будут автоматически определены для окна, но переменные, определенные глобально const и let, не будут автоматически определены на window, измените его на const, чтобы вывести window.length из 0, так как window.length указывает, что на текущей странице есть несколько iframe, вы можете посмотреть информацию на MDNwindow.lengthОпределение

Каков результат изменения его на следующее?

var length = 10;

function fn() {
    console.log(this.length);
}

const obj = {
    length: 5,
    method: function(fn) {
        fn();
        const fun = arguments[0];
        fun()；
    }
};

obj.method(fn, 1);

10, 10

example 2

window.val = 1;
var obj = {
    val: 2,
    dbl: function() {
        this.val *= 2;
        val *= 2;
        console.log(val);
        console.log(this.val);
    }
}
obj.dbl(); // 2 4
var func = obj.dbl;
func(); // 8 8

Это немного отступление, но его легко понять с помощью пошагового анализа:

obj.dbl(); Когда эта строка кода выполняется, это относится кobj,такthis.val === obj.val*=2, окончательный результат4,val*=2 === window.val *= 2, окончательный результат2

func(), когда эта строка кода выполняется,func()без префикса,thisОтноситсяwindow.func(); так что на данный момент это значение равноwindow,this.val === window.val *= 2,В настоящее времяwindow.valза4,val*=2 === window.val *2, окончательный результат8,Наконецconsole.log(this.val),иconsole.log(val), относясь к обоимwindow.val, окончательный результат8Вышеизложенное является моим собственным пониманием, если есть какие-либо проблемы, пожалуйста, поправьте меня~

Ссылаться на

этот принцип JavaScript

About

• github
• blog