지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > 자바스크립트에서 이 키워드의 사용법(코드 포함)

자바스크립트에서 이 키워드의 사용법(코드 포함)

不言
풀어 주다： 2018-08-07 15:10:49
원래의
2002명이 탐색했습니다.

이 기사의 내용은 JavaScript(코드 포함)에서 이 키워드의 사용법에 대한 것입니다. 특정 참조 값이 있으므로 도움이 필요한 친구에게 도움이 되기를 바랍니다.

이 글은 주로 JS(브라우저 환경)에서 이 키워드의 포인팅 문제를 설명합니다.

먼저 JS에서 함수를 호출하는 여러 가지 방법을 이해해야 합니다.

  • 일반적인 함수 호출

  • 메서드로 호출

  • 생성자로 호출

  • 적용/호출 메소드를 사용하여

  • Function.prototype.bind 메소드

  • es6 화살표 함수

어떤 함수를 사용하든 상관없습니다. 전화 , 한 가지만 기억하세요: 누가 이 함수나 메소드를 호출하든, this 키워드는 누구를 가리킵니다.

다음으로 상황에 따라 이러한 다양한 상황에 대해 논의하겠습니다.

1. 일반 함수 호출

function person(){
        this.name="xl";
        console.log(this);
        console.log(this.name);
    }
    
    person();  //输出  window  xl
로그인 후 복사

이 코드에서는 person 함수가 호출됩니다. 일반 함수, 실제로 person은 전역 개체 window, 즉 window.person();person函数作为普通函数调用，实际上person是作为全局对象window的一个方法来进行调用的，即window.person();
所以这个地方是window对象调用了person方法，那么person函数当中的this即指window，同时window还拥有了另外一个属性name,值为xl.

     var name="xl";
     function person(){
         console.log(this.name);
    }
     person(); //输出 xl
로그인 후 복사

同样这个地方person作为window的方法来调用，在代码的一开始定义了一个全局变量name，值为xl，它相当于window的一个属性，即window.name="xl"，又因为在调用person的时候this是指向window的，因此这里会输出xl.

2、作为方法来调用

在上面的代码中，普通函数的调用即是作为window对象的方法进行调用。显然this关键字指向了window

의 메서드로 호출됩니다. 따라서 요점은 window 개체가 person 메서드를 호출한 다음 person 함수의 this가 다음을 참조한다는 것입니다. window.동시에 window에는 값이 xl인 또 다른 name 속성도 있습니다.

var name="XL";
    var person={
        name:"xl",
        showName:function(){
            console.log(this.name);
        }
    }
    person.showName();  //输出  xl
   //这里是person对象调用showName方法，很显然this关键字是指向person对象的，所以会输出name
    
    var showNameA=person.showName;
    showNameA();    //输出  XL
    //这里将person.showName方法赋给showNameA变量，此时showNameA变量相当于window对象的一个属性，因此showNameA()执行的时候相当于window.showNameA(),即window对象调用showNameA这个方法，所以this关键字指向window
로그인 후 복사

같은 곳 person이 window의 메소드로 호출됩니다. 코드 시작 부분에 전역 변수 name이 정의되어 있습니다. xl.window의 속성, 즉 window.name="xl", 와 동일하며 이는 person code> 호출 시 window를 가리키므로 xl가 여기에 출력됩니다.

2.

위 코드에서는 일반 함수 호출이 window 객체의 메서드로 이루어집니다. 분명히 this 키워드는 window 객체를 가리킵니다.

🎜다른 형식을 살펴보겠습니다🎜🎜
var personA={
        name:"xl",
        showName:function(){
            console.log(this.name);
        }
    }
    var personB={
        name:"XL",
        sayName:personA.showName
    }
    
    personB.sayName();  //输出 XL
    //虽然showName方法是在personA这个对象中定义，但是调用的时候却是在personB这个对象中调用，因此this对象指向personB
로그인 후 복사
🎜🎜그리고 다른 형식:🎜🎜
function  Person(name){
        this.name=name;
    }
    var personA=Person("xl");   
    console.log(personA.name); // 输出  undefined
    console.log(window.name);//输出  xl
    //上面代码没有进行new操作，相当于window对象调用Person("xl")方法，那么this指向window对象，并进行赋值操作window.name="xl".
    
    var personB=new Person("xl");
    console.log(personB.name);// 输出 xl
    //这部分代码的解释见下
로그인 후 복사
🎜🎜3 생성자로 호출하세요🎜🎜🎜
//下面这段代码模拟了new操作符(实例化对象)的内部过程
    function person(name){
        var o={};//创建空对象
        o.__proto__=Person.prototype;  //为创建对象指定原型，继承原型属性和方法
        Person.call(o,name);
        return o;
    }
    var personB=person("xl");
    
    console.log(personB.name);  // 输出  xl
로그인 후 복사
로그인 후 복사
🎜

new操作符

//下面这段代码模拟了new操作符(实例化对象)的内部过程
    function person(name){
        var o={};//创建空对象
        o.__proto__=Person.prototype;  //为创建对象指定原型，继承原型属性和方法
        Person.call(o,name);
        return o;
    }
    var personB=person("xl");
    
    console.log(personB.name);  // 输出  xl
로그인 후 복사
로그인 후 복사

这段代码涉及到了_proto_及prototype的概念，如果有需要了解，请点击链接

  • 在person里面首先创建一个空对象o，将o的proto指向Person.prototype完成对原型的属性和方法的继承

  • Person.call(o,name)这里即函数Person作为apply/call调用(具体内容下方)，将Person对象里的this改为o，即完成了o.name=name操作

  • 返回对象o。

    因此`person("xl")`返回了一个继承了`Person.prototype`对象上的属性和方法，以及拥有`name`属性为"xl"的对象，并将它赋给变量`personB`. 所以`console.log(personB.name)`会输出"xl"

4、call/apply方法的调用

在JS里函数也是对象，因此函数也有方法。从Function.prototype上继承到Function.prototype.call/Function.prototype.apply方法
call/apply方法最大的作用就是能改变this关键字的指向。

Obj.method.apply(AnotherObj,arguments);

var name="XL";
    var Person={
        name:"xl",
        showName:function(){
            console.log(this.name);
        }
    }
    Person.showName.call(); //输出 "XL"
    //这里call方法里面的第一个参数为空，默认指向window。
    //虽然showName方法定义在Person对象里面，但是使用call方法后，将showName方法里面的this指向了window。因此最后会输出"XL";
    funtion FruitA(n1,n2){
        this.n1=n1;
        this.n2=n2;
        this.change=function(x,y){
            this.n1=x;
            this.n2=y;
        }
    }
    
    var fruitA=new FruitA("cheery","banana");
    var FruitB={
        n1:"apple",
        n2:"orange"
    };
    fruitA.change.call(FruitB,"pear","peach");
    
    console.log(FruitB.n1); //输出 pear
    console.log(FruitB.n2);// 输出 peach
로그인 후 복사

FruitB调用fruitA的change方法，将fruitA中的this绑定到对象FruitB上。

5、Function.prototype.bind()方法

var name="XL";
    function Person(name){
        this.name=name;
        this.sayName=function(){
            setTimeout(function(){
                console.log("my name is "+this.name);
            },50)
        }
    }
    var person=new Person("xl");
    person.sayName()  //输出  “my name is XL”;
    //这里的setTimeout()定时函数，相当于window.setTimeout()，由window这个全局对象对调用,因此this的指向为window，则this.name则为XL
로그인 후 복사

那么如何才能输出"my name is xl"呢？

var name="XL";
    function Person(name){
        this.name=name;
        this.sayName=function(){
            setTimeout(function(){
                console.log("my name is "+this.name);
            }.bind(this),50)  //注意这个地方使用的bind()方法，绑定setTimeout里面的匿名函数的this一直指向Person对象
        }
    }
    var person=new Person("xl");
    person.sayName(); //输出 “my name is xl”;
로그인 후 복사

这里setTimeout(function(){console.log(this.name)}.bind(this),50);匿名函数使用bind(this)方法后创建了新的函数，这个新的函数不管在什么地方执行，this都指向的Person,而非window，因此最后的输出为"my name is xl"而不是"my name is XL"

另外几个需要注意的地方：
setTimeout/setInterval/匿名函数执行的时候，this默认指向window对象，除非手动改变this的指向。在《javascript高级程序设计》当中，写到：“超时调用的代码(setTimeout)都是在全局作用域中执行的，因此函数中的this的值，在非严格模式下是指向window对象，在严格模式下是指向undefined”。本文都是在非严格模式下的情况。

var name="XL";
    function Person(){
        this.name="xl";
        this.showName=function(){
            console.log(this.name);
        }
        setTimeout(this.showName,50);
    }
    var person=new Person(); //输出 "XL"
    
    //在setTimeout(this.showName,50)语句中，会延时执行this.showName方法
    //this.showName方法即构造函数Person()里面定义的方法。50ms后，执行this.showName方法，this.showName里面的this此时便指向了window对象。则会输出"XL";
로그인 후 복사
修改上面的代码：
var name="XL";
    function Person(){
        this.name="xl";
        var that=this;
        this.showName=function(){
            console.log(that.name);
        }
        setTimeout(this.showName,50)
    }
    var person=new Person(); //输出 "xl"

13 
    //这里在Person函数当中将this赋值给that，即让that保存Person对象，因此在setTimeout(this.showName,50)执行过程当中，console.log(that.name)即会输出Person对象的属性"xl"
로그인 후 복사
匿名函数：
var name="XL";
    var person={
        name:"xl",
        showName:function(){
            console.log(this.name);
        }
        sayName:function(){
            (function(callback){
                callback();
            })(this.showName)
        }
    }
    person.sayName();  //输出 XL
    var name="XL";
    var person={
        name:"xl",
        showName:function(){
            console.log(this.name);
        }
        sayName:function(){
            var that=this;
            (function(callback){
                callback();
            })(that.showName)
        }
    }
    person.sayName() ;  //输出  "xl"
    //匿名函数的执行同样在默认情况下this是指向window的，除非手动改变this的绑定对象
로그인 후 복사

6、Eval函数

eval函数执行的时候，this绑定到当前作用域的对象上。

var name="XL";
    var person={
        name:"xl",
        showName:function(){
            eval("console.log(this.name)");
        }
    }
    
    person.showName();  //输出  "xl"
    
    var a=person.showName;
    a();  //输出  "XL"
로그인 후 복사

7、箭头函数

es6里面this指向固定化，始终指向外部对象，因为箭头函数没有this,因此它自身不能进行new实例化，同时也不能使用call, apply, bind等方法来改变this的指向。

function Timer() {
        this.seconds = 0;
        setInterval( () => this.seconds ++, 1000);
    } 
    
    var timer = new Timer();
    
    setTimeout( () => console.log(timer.seconds), 3100);
    
    // 3
   // 在构造函数内部的setInterval()内的回调函数，this始终指向实例化的对象，并获取实例化对象的seconds的属性，每1s这个属性的值都会增加1。否则最后在3s后执行setTimeOut()函数执行后输出的是0
로그인 후 복사

相关文章推荐：

vuex模块化和命名空间的实例代码

vue组件是什么？Vue组件的的介绍

js如何获取文件上传进度？js获取文件上传进度的代码

위 내용은 자바스크립트에서 이 키워드의 사용법(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
이 키워드
원천：php.cn
이전 기사：Vuex 모듈화 및 네임스페이스에 대한 예제 코드 다음 기사：js 데이터 유형은 무엇입니까? js의 데이터 유형 요약
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
웹 애플리케이션에 버전 정보를 표시하는 모범 사례는 무엇입니까? 웹 애플리케이션을 개발 중입니다. 웹 애플리케이션에 버전 정보를 표시하는 모범 사례는 무엇입니까? 저는 semantic versioning을 사용하고 있고 이미 ...
에서 2024-04-06 19:13:16
0
2
476
Meta_query ORtax_query에 대해 "OR" 관계 설정 WP_Query를 사용하여 Meta_query 요소와 Tax_query 요소가 포함된 쿼리를 생성하려고 합니다. 더 중요한 점은 두 조건(및 AND 절)을 모두 ...
에서 2024-04-04 20:01:43
0
1
1346
외래 키 항목을 제거하는 단계 직원과 주소라는 두 개의 테이블이 있습니다. Employee는 내 기본 테이블이고 Address는 외래 키 AddressId를 통해 Employee와 관련된 하위...
에서 2024-04-04 14:15:44
0
1
352
Illuminate\Database\QueryException: SQLSTATE: 일반 오류: 1364 왜 데이터를 입력할 수 없나요? 약속 테이블에서 userid 속성을 입력하고 싶지 않습니다. 상관 관계가 좋습니다. \Database\QueryException:...
에서 2024-04-03 22:39:00
0
1
363
문제: MySQL 정규 표현식(리미터가 작동하지 않음) Mod 참고 사항: 제거하지 않음/닫지 않음 이전에 이 질문을 했는데 관리자가 다른 사용자의 질문과 유사하다고 생각하여 닫았습니다. 그들이 나에게 추천한 스레드를...
에서 2024-04-02 23:35:21
0
1
263
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿