집 > 기사 > 웹 프론트엔드 > JavaScript가 가리키는 곳은 어디입니까?

JavaScript가 가리키는 곳은 어디입니까?

青灯夜游원래의: 2021-06-15 16:27:353807검색

다음을 가리킵니다. 1. 일반 함수 또는 개체 속성으로 창 개체를 가리킵니다. 2. 이벤트 바인딩에서 바인딩된 이벤트의 요소를 가리킵니다. 3. 생성자에서 클래스의 인스턴스를 가리킵니다. 4. 화살표 함수에서 가장 가까운 상위 컨텍스트에서 This를 가리킵니다. 5. 호출/적용/바인드에서 전달된 첫 번째 매개변수를 가리킵니다.

이 튜토리얼의 운영 환경: windows7 시스템, javascript 버전 1.8.5, Dell G3 컴퓨터

JavaScript의 this 포인터는 다음 상황: 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();

answer:

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

可以看到函数作为对象的属性被调用的时候，其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();});

answer:

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

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

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

构造函数(`new Fn`)

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

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

const fn = new Fn();

answer:

1. 200

箭头函数

箭头函数中没有自身的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();

answer:

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

`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();

answer:

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

利用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;
};

到这里，有的小伙伴可能已经发现了，如果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;
}

在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;
};

apply的实现与call

일반 함수 또는 객체 속성
이벤트 바인딩
생성자
화살표 함수
call/apply/bind사양

하나씩 소개하겠습니다🎜

일반 함수 또는 객체 속성

🎜this는 메소드 실행 앞에 "점"이 있는지 여부에 따라 달라집니다. "점"이 있으면 "점" 앞에 있는 사람이 this가 됩니다. . 점이 없으면 this는 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;
};

🎜를 가리킵니다.🎜

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

🎜함수를 객체의 속성으로 호출하면 this는 함수를 호출하는 개체를 가리키고, 그렇지 않으면 this는 창🎜

이벤트 바인딩을 가리킵니다.

🎜이벤트 바인딩이 수행될 때 이벤트 바인딩 함수에서 this는 이벤트를 바인딩하는 요소입니다: 🎜

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

🎜answer:🎜

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);

🎜하지만 여기서는 사용자가 클릭하면 브라우저는 클릭 이벤트의 this 포인트를 이벤트가 바인딩된 DOM 요소로 전송하도록 도와줍니다. 해당 이벤트가 코드를 통해 트리거되면 this🎜

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

생성자( `new Fn`)

🎜를 지정할 수 있습니다. 함수의 생성자(new Fn)는 현재 클래스의 인스턴스입니다. new 키워드는 이를 수행하는 데 도움이 됩니다. 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

🎜답변:🎜rrreee

화살표 함수

🎜화살표 함수에는 자체 this 가 없고 this가 없습니다. 사용된 코드>는 가장 가까운 상위 컨텍스트에서 this입니다🎜rrreee🎜답변:🎜rrreee

`call /apply/bindthis`변경 >

을 가리킵니다🎜call/apply/bind에 전달된 첫 번째 매개변수는 this:🎜rrreee🎜answer:🎜rrreee 함수입니다.

call이 실행될 때 첫 번째 매개변수는 this가 가리키는 매개변수이고, 다음 매개변수는 fn이 있을 때의 매개변수입니다.
apply가 실행되면 첫 번째 매개변수는 this가 가리키는 매개변수입니다. fn이 실행됩니다. 배열의 각 항목은 fn의 각 매개변수에 해당합니다.
bind가 실행되면 첫 번째 매개변수는 미리 전달된 매개변수는 this이고, 후속 매개변수는 실제로 fn을 호출하기 전에 미리 전달된 매개변수입니다. 반환 값은 fixedThisFn 함수입니다. code>. <code>fixedThisFn은 내부적으로 fn을 호출하고 this가

call/apply/bind

this

`call/apply/bind`소스 코드 구현

이

JavaScript

call/apply의 첫 번째 매개변수 <code>context

context

this

context

call의 소스 코드 시뮬레이션은 다음과 같습니다. 🎜rrreee🎜이 시점에서 몇몇 친구들은 <code>call/apply

call

mdn

function.call(thisArg, arg1, arg2 , ..)

thisArg

function

this

이

null 또는 정의되지 않음을 지정하세요. code>는 자동으로 전역 개체를 가리키도록 대체되고 원래 값은 래핑됩니다.

myOwnCall

apply

call

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;
};

相比于call/apply，bind函数并没有立即执行函数，而是预先传入函数执行时的this和参数，并且返回一个函数，在返回的函数中执行调用bind函数并将预先传入的this和参数传入

bind的源码模拟：

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

精简版如下：

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

这里并没有实现通过new操作符来执行fn.bind(context)的操作，如果想知道其详细的实现过程，可以看我的这篇文章: JS进阶-手写bind

在深入理解call/apply/bind的实现原理后，我们尝试完成下面的测试：

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);

answer:

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

这里我们根据call的源码来进行推导一下Function.prototype.call.call(fn1)，其它的执行过程类似：

// 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

更多编程相关知识，请访问：编程入门！！

위 내용은 JavaScript가 가리키는 곳은 어디입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：자바스크립트 나누기에서 정수를 얻는 방법다음 기사：자바스크립트 나누기에서 정수를 얻는 방법

JavaScript가 가리키는 곳은 어디입니까?

普通函数或作为对象属性

事件绑定

构造函数(new Fn)

箭头函数

call/apply/bind改变this指向

call/apply/bind源码实现

일반 함수 또는 객체 속성

이벤트 바인딩을 가리킵니다.

생성자( new Fn)

화살표 함수

call /apply/bindthis변경 >

call/apply/bind소스 코드 구현

관련 기사

构造函数(`new Fn`)

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

`call/apply/bind`源码实现

생성자( `new Fn`)

`call /apply/bindthis`변경 >

`call/apply/bind`소스 코드 구현