recherche

Maison  >  Article  >  interface Web  >  Utilisation de ce mot clé en javascript (avec code)

Utilisation de ce mot clé en javascript (avec code)

不言
不言original
2018-08-07 15:10:491966parcourir

Le contenu de cet article concerne l'utilisation de ce mot-clé en JavaScript (avec code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Cet article explique principalement le problème de pointage de ce mot clé en JS (dans l'environnement navigateur).

Tout d'abord, vous devez comprendre les différentes manières d'appeler des fonctions en JS :

  • Appels de fonctions ordinaires

  • Appeler en tant que méthode

  • Appeler en tant que constructeur

  • Utilisez la méthode apply/call pour appeler la méthode

  • Function.prototype.bind

  • Fonction flèche es6

Mais quelle que soit la méthode d'appel de la fonction, n'oubliez pas une chose : Qui Quand cette fonction ou méthode est appelée, le mot-clé this pointe vers qui.

Ensuite, nous aborderons ces différentes situations :

Appels de fonctions ordinaires

function person(){
        this.name="xl";
        console.log(this);
        console.log(this.name);
    }
    
    person();  //输出  window  xl

Dans ce code, la fonction person est appelée comme une fonction normale. En fait, person est appelée comme une méthode de l'objet global window, c'est-à-dire window.person();
C'est donc ici que l'objet appelle la méthode window, puis le person dans la fonction person fait référence à this et window， a également un autre attribut window , la valeur est name.xl

     var name="xl";
     function person(){
         console.log(this.name);
    }
     person(); //输出 xl

Le même endroit est appelé comme méthode de person, et une variable globale La valeur est window, ce qui équivaut à un attribut de name，, c'est-à-dire xl， et parce que window pointe vers window.name="xl"， lors de l'appel de person, donc this.window sera affiché ici. xl

2. Appelez

comme méthode Dans le code ci-dessus, l'appel de la fonction ordinaire est appelé comme méthode. méthode de l'objet

. Évidemment, le mot-clé pointe vers l'objet window. thiswindow

Regardons d'autres formulaires

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
Changeons le formulaire : 

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
3. Appeler

en tant que constructeur

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获取文件上传进度的代码

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript es6 命名空间 构造函数 全局变量 继承 JS console undefined function 对象 作用域 严格模式 this prototype
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Exemple de code pour la modularisation et les espaces de noms vuexArticle suivant：Exemple de code pour la modularisation et les espaces de noms vuex

Articles Liés

Voir plus