zoukankan      html  css  js  c++  java
  • js thiskeyword

    相信大家都接触过this了,那么 this究竟是什么意思呢?看其字面意思就是个代词。指代其它的一些东西。

    那么我们在程序其中,事实上也是一样。this也是个代词。

    比方我们在java其中,this的keyword是指代当前class 的本身。不管this身处何处,this都指向当前class,它的作用域是作用域整个class的。

    只是我们今天不是讲后台。我们的重点是讲js。那么js中的thiskeyword的作用域是怎么样的呢?和java有什么差别呢?

    1,第一种情况

    var person= function(){

           this.name = "spring";

           this.age = 25;

          alert(this); //output: window

    }

    这段代码的thiskeyword指向的是全局window对象.



    2,另外一种情况

    var person= function(){
           this.name = "spring";
           this.age = 25;
           console.log(this); //output: person本身
    }

    new person(); //解释:实例化this指代person对象

    那么如上所看到的,实例化该person对象之后。this指向的是当前person的本身。


    3。第三种情况

    var person = {

    name:"spring",

           age: 25,

           eat: function(){

                    alert(this.name+"正在吃饭"); //output: spring 正在吃饭

          }

    }

    person.eat();//解释:this指代当前person对象


    4。第四种情况:

    var person = {
                  name:"spring",

                  age: 25,

                  sex:{
                         male:"男",

                         getMale: function(){
                                   console.log(this); //output:  sex object
                           }
                 }

    };

    person.sex.getMale(); //解释:this指代sex object



    ------------------------------------------------------------------------------------------------------------

    好了写到这里。各位看明确了没有?请注意红色部分字体。

    new person(); //this指代person对象


    person.eat();//this指代当前person对象


    person.sex.getMale(); //this指代sex对象


    依据这个规律,我们能够得出一个结论:

               谁调用的this就指代谁。


    5,第五种情况:回调函数

    function test(){
             var person = {
                    name:"spring",
                    age: 25,
                     getAge: function(callback){

                              console.log(this); //output: person object
                              callback(this.age); 
                    }
              }

             alert(this); //output: test object
             person.getAge(function(age){
                      alert(age);//output: 25

                      //xxx
                      alert(this);//output: window object
            });
    }
    new test();

    注意看上面回调函数里面的this(// xxx以下那一行),却指向了window全局对象,哎。

    怎么是这样。为什么不是person对象呢?为什么不是test对象呢?

    那么按照我们上面的结论,谁调用指向谁。那么我们看是谁调用的?

    噢,找到了,声明了一个匿名函数当做參数传递给了getAge(callback)方法。然后运行了callback(this.age); 

    那么我们又想一下,这个匿名函数又是谁呢?好像谁都不属于,那么该匿名函数就是指向window对象啦。

    soga,原来是这样。似乎有点点懂了。

    结论:回调函数的时候,this的上下文发生了变化,也就是this的指针发生了变化。

    只是我们一般会这样做:

             alert(this); //output: test object

             var self = this; //self 保存this作用域
             person.getAge(function(age){
                      alert(age);//output: 25

                      alert(this);//output: window object

                      alert(self);//output: test object;
            });


    噢。原来这样用self变量去储存当前this(也就是test)对象。


    6.第六种情况prototype

    //编写一个string的insert method

    String.prototype.insert = function(){
                console.log(this);  //output > String {0"1"1"2"2"3"3"4"4"5"5"6"length6insertfunction}

                                                 //这里this代表的是String.prototype > object对象
                console.log(this.toString()); //output string "123456"
    }


    test();
    function test(){
                var str = "123456";
                str.insert(); //调用insert method

    }


    然后我们再看另外一段代码:

    function Person(name){

           console.log(this);//output > Person

           this.name = name;

    }

    Person.prototype.getName = function(){

           console.log(this);//output > Person

           return this.name;

    };

    var person = new Person("spring"); //实例化this代表自身

    person.getName(); // output > spring


    上面这种写法等同于以下这种写法:

    function Person(name){

           this.name = name;

    }

    Person.prototype = {

           getName: function(){

                  console.log(this);//output > Person

                  return this.name;

           }

    };



    7.第七种情况call、apply

    function base(){
                this.add = function(){
                    console.log(this);//output > test {add: function}  ,this指针发生了变化
                }

    }
    function test(){
              console.log(this);//output > test {}
              base.call(this);   //call方法会把这个base中的this对象用这个this(也就是test对象)取代,

                                             //取代之后,自然base对象中的this.add 方法就变成了test的方法属性了

              //call方法把别人的东西变成自己的。 other.call(yourself)。yourself对象会取代other中的this对象

              console.log(this) //output > test {add: function}
    }
    var result = new test();
    console.log(result);//output > test {add: function}
    result.add();//调用,调用之后,发现this的指针发生了变化。

    this不再是base对象而是变成了test对象了。


    call带參数的情况:

    function base(d1,d2){
                alert(d1+d2); //output > 123456
                this.add = function(){
                    console.log(this);//output > test {add: function}

                }
    }
    function test(){
                base.call(this,"123","456");//多个參数用逗号隔开:"123","456","789"……
    }
    var result = new test();



    apply method:

    call 和apply的差别就是參数类型不同

    function base(d1,d2){ //非常惊奇的发现,本来传给我的參数是一个数组呀。按道理来说我应该接收的是一个数组嘛,但是却被拆分成两个对象。


                alert(d1+d2); //output > 123456
                this.add = function(){
                    console.log(this);//output > test {add: function}
                } 

    }
    function test(){
                base.apply(this,["123","456"]); //參数是数组:["123","456","789"……]
    }
    var result = new test();


    改动下变成:

    function base(d1,d2){
                alert(d1+d2);//output > 123456
                this.add = function(data){
                    alert(data);//output > ADD
                }

    }
    function test(){

    }
    var result = new test();
    base.apply(result,["123","456"]);
    result.add("ADD")
















  • 相关阅读:
    Analysis Services features supported by SQL Server editions
    Azure DevOps to Azure AppServices
    Power BI For Competition
    Win10开机“提示语音”以及”随机播放音乐”
    Azure DevOps
    Allow Only Ajax Requests For An Action In ASP.NET Core
    Mobile CI/CD 101
    Configure SSL for SharePoint 2013
    AWS Step Function Serverless Applications
    Cordova Upload Images using File Transfer Plugin and .Net core WebAPI
  • 原文地址:https://www.cnblogs.com/tlnshuju/p/6893710.html
Copyright © 2011-2022 走看看