Wohin weist JavaScript?-js-Tutorial-php.cn

Dies zeigt auf: 1. Gewöhnliche Funktionen oder als Objektattribute, die auf das Fensterobjekt zeigen. 2. Bei der Ereignisbindung zeigt es auf das Element des gebundenen Ereignisses. 3. Im Konstruktor zeigt es auf die Instanz der Klasse. 4. Zeigen Sie in der Pfeilfunktion auf „This“ im nächstgelegenen übergeordneten Kontext. 5. Zeigen Sie in „call/apply/bind“ auf den ersten übergebenen Parameter.

Wohin weist JavaScript?

Die Betriebsumgebung dieses Tutorials: Windows7-System, Javascript-Version 1.8.5, Dell G3-Computer

Der this-Zeiger in JavaScript ist unterteilt in folgende Situationen: JavaScript中this指向分为以下几种情况：

普通函数或作为对象属性
事件绑定
构造函数
箭头函数
call/apply/bind指定

下面我们来进行一一介绍

普通函数或作为对象属性

this取决于方法执行前面是否有“点”，有“点”的话，“点”前面是谁this就是谁，如果没有点的话，this指向window

const fn = function () {
  console.log(this);
};

const obj = { name: &#39;OBJ&#39;, fn };

fn();

obj.fn();

const fn1 = obj.fn;
fn1();

Nach dem Login kopieren

answer:

1. window
2. {name: &#39;OBJ&#39;, fn: function() {console.log(this)}} // obj
3. window

Nach dem Login kopieren

可以看到函数作为对象的属性被调用的时候，其this指向调用该函数的对象，否则其this指向window

事件绑定

在进行事件绑定的时候，事件绑定函数中的this是绑定事件的元素：

// 假设页面中有id为button的button元素
// var x = 100;
window.x = 100;
const fn = function () {
  console.log(this.x);
};
const obj = { x: 200, fn };
const $button = document.getElementById(&#39;button&#39;);
$button.x = 300;

obj.fn();
const fn1 = obj.fn;
fn1();

$button.addEventListener(&#39;click&#39;, fn);
$button.addEventListener(&#39;mouseenter&#39;, obj.fn);

$button.addEventListener(&#39;mouseleave&#39;, function () {obj.fn();});

Nach dem Login kopieren

answer:

1. 200
2. 100
3. 点击button时：300
4. 鼠标移入button时：300
5. 鼠标移出时：200

Nach dem Login kopieren

但是需要注意的是，这里我们是在用户点击时，浏览器帮我们将点击事件的this指向绑定该事件的DOM元素。如果通过代码来触发对应的事件的话，我们可以通过call/apply/bind来指定其this

$button.click.call() // this为window,打印结果为100

Nach dem Login kopieren

构造函数(`new Fn`)

构造函数(new Fn)执行，函数中的this是当前类的实例，这是new关键字帮我们做到的:

var x = 100;
const Fn = function () {
  this.x = 200;
  console.log(this.x);
};

const fn = new Fn();

Nach dem Login kopieren

answer:

1. 200

Nach dem Login kopieren

箭头函数

箭头函数中没有自身的this，所用到的this都是其最近父级上下文中的this

const fn = function () {
  console.log(this);
  setTimeout(() => {
    console.log(this);
  }, 1000);
  setTimeout(function () {
    console.log(this);
  });
};

const obj = { x: 100, fn };

obj.fn();

Nach dem Login kopieren

answer:

1. {x:100, fn: function() {...}} // obj
2. window
3. {x:100, fn: function() {...}} // obj

Nach dem Login kopieren

`call/apply/bind`改变`this`指向

为call/apply/bind传入的第一个参数即为函数的this：

var x = 100;
const obj = { x: 200, y: 200 };
const fn = function () {
  console.log(this.x);
};

fn();
fn.call(obj);
fn.apply(obj);

const fixedThisFn = fn.bind(obj);
fixedThisFn();

Nach dem Login kopieren

answer:

Nach dem Login kopieren

call在执行时，第一个参数为this指向，之后的参数为fn执行时的参数
apply在执行时，第一个参数为this指向，之后的参数为fn执行时的参数组成的数组，数组的每一项会和fn的每一个参数进行对应
bind在执行时，第一个参数为预先传入this指向，之后的参数为实际调用fn前预先传入的参数，返回值为一个函数fixedThisFn，fixedThisFn内部会调用fn并指定其this指向

为了更深入的理解call/apply/bind是如何改变函数中this指向的，下面我们分别模拟实现这三个函数

`call/apply/bind`源码实现

根据前面的介绍，我们知道：当函数作为对象属性被调用时，this指向调用该函数的对象

const obj = { x: 100, fn () {console.log(this);} };
obj.fn(); // {x: 100, fn: function() {...}} => obj

Nach dem Login kopieren

利用JavaScript这个特性，我们可以将执行的函数作为call/apply的第一个参数context的属性，然后通过context来调用该属性对应的函数，函数的this便指向了context

call的源码模拟如下：

Function.prototype.myOwnCall = function (context, ...args) {
  const uniqueKey = new Date().getTime();
  // this为调用call方法的函数
  context[uniqueKey] = this;
  // 作为对象的方法被对象调用，this指向该对象context
  const result = context[uniqueKey](...args);
  delete context[uniqueKey];
  return result;
};

Nach dem Login kopieren

到这里，有的小伙伴可能已经发现了，如果call/apply传入的context不是对象呢？

首先我们看下mdn对call方法的第一个参数的描述：

语法：function.call(thisArg, arg1, arg2, ...)
* thisArg
可选的。在function函数运行时使用的this值。请注意，this可能不是该方法看到的实际值：如果这个函数处于非严格模式下，则指定null或undefined时会自动替换为指向全局对象，原始值会被包装

接下来，我们对myOwnCall方法的第一个参数做如下处理：

function translateToObject (context) {
  // 可以通过 == 进行判断 context == null
  // null == undefined  => 2个等号是成立的
  // null,undefined => window
  if (typeof context === &#39;undefined&#39; || context === null) {
    context = window;
  } else if (typeof context === &#39;number&#39;) { // 原始值转换为包装对象
    context = new Number(context);
  } else if (typeof context === &#39;string&#39;) {
    context = new String(context);
  } else if (typeof context === &#39;boolean&#39;) {
    context = new Boolean(context);
  }
  return context;
}

Nach dem Login kopieren

在myOwnCall方法中调用该函数：

Function.prototype.myOwnCall = function (context, ...args) {
  context = translateToObject(context);
  const uniqueKey = new Date().getTime();
  // this为调用call方法的函数
  context[uniqueKey] = this;
  // 作为对象的方法被对象调用，this指向该对象context
  const result = context[uniqueKey](...args);
  delete context[uniqueKey];
  return result;
};

Nach dem Login kopieren

apply的实现与call

Gewöhnliche Funktion oder als Objekteigenschaft
Ereignisbindung
Konstruktor
Pfeilfunktion
< code> call/apply/bindSpezifikation

Lassen Sie uns sie einzeln vorstellen🎜

Gewöhnliche Funktionen oder als Objektattribute

🎜< Code >this hängt davon ab, ob ein „Punkt“ vor der Methodenausführung steht. Wenn ein „Punkt“ vorhanden ist, wird derjenige, der vor dem „Punkt“ steht, this sein . Wenn kein Punkt vorhanden ist, zeigt this< /code> auf <code>window🎜

Function.prototype.myOwnBind = function (context, paramsArray) {
  context = translateToObject(context);
  const uniqueKey = new Date().getTime();
  // this为调用call方法的函数
  context[uniqueKey] = this;
  // 作为对象的方法被对象调用，this指向该对象context
  const result = context[uniqueKey](...paramsArray);
  delete context[uniqueKey];
  return result;
};

Nach dem Login kopieren

🎜Antwort:🎜

Function.prototype.myOwnBind = function (context, ...outerArgs) {
  const fn = this;
  return function (...innerArgs) {
    return fn.call(context, ...outerArgs, ...innerArgs);
  };
};

Nach dem Login kopieren

🎜Sie können sehen, dass eine Funktion als Eigenschaft eines Objekts aufgerufen wird this zeigt auf das Objekt, das die Funktion aufruft, andernfalls zeigt this auf window🎜

Ereignisbindung

🎜Wenn die Ereignisbindung durchgeführt wird, ist this in der Ereignisbindungsfunktion das Element, das das Ereignis bindet: 🎜

Function.prototype.myOwnBind = (context, ...outerArgs) => (...innerArgs) => this.call(context, ...outerArgs, ...innerArgs);

Nach dem Login kopieren

🎜Antwort:🎜

function fn1 () {console.log(1);}
function fn2 () {console.log(2);}
fn1.call(fn2);

fn1.call.call(fn2);

Function.prototype.call(fn1);
Function.prototype.call.call(fn1);

Nach dem Login kopieren

🎜Aber es sollte beachtet werden, dass hier, wenn die Wenn der Benutzer klickt, hilft uns der Browser dabei, die thisPoints des Klickereignisses auf das DOM-Element zu übertragen, an das das Ereignis gebunden ist. Wenn das entsprechende Ereignis durch Code ausgelöst wird, können wir seinen this🎜

1. 1
2. 2
3. 什么都不输出
4. 1

Nach dem Login kopieren

Konstruktor ( `new Fn`)

🎜 angeben Der Konstruktor (new Fn) wird in der Funktion als Instanz der aktuellen Klasse ausgeführt. Das Schlüsselwort new hilft uns dabei it:🎜

// 1. 首先会将Function.prototype.call作为一个函数来执行它原型上的call方法
// 所以call方法内部：
//    this => Function.prototype.call
//    context => fn1
// 通过对象的属性来执行方法改变this指向
//    fn1[uniqueKey] = this(Function.prototype.call)
//    fn1[uniqueKey]() // 执行 Function.prototype.call方法，但是this是context
// 2. 在this为fn1的情况下执行Function.prototype.call方法
// 所以call方法内部：
//    this => fn1
//    context => window
// 通过对象的属性来改变this指向
//    window[uniqueKey] = fn1
//    window[uniqueKey]() // 执行fn1()，但是this是window

Nach dem Login kopieren

🎜Antwort:🎜rrreee

Pfeilfunktion

🎜Die Pfeilfunktion hat keinen eigenen this, den this</ Der verwendete Code ist <code>this im nächsten übergeordneten Kontext🎜rrreee🎜answer:🎜rrreee