• JavaScript this 关键字


    概述

    任何执行 JavaScript 的环境称之为 执行上下文默认情况下,执行上下文是全局的,这意味着如果代码作为简单函数调用的一部分执行,则该 this 变量将引用 全局对象 。在浏览器的情况下,全局对象是 windows 对象。但在 NodeJS 环境中,this 值是一个特殊的 global 对象。

    简单函数

      // 案例 1,简单函数,浏览器下的 this -> window,NodeJS 下的 this -> global

      function simple1() {

        console.log("案例 1,简单函数");

        console.log("我是简单函数,this 指向 window");

        console.log(this);

      }

      simple1();

    严格模式

      // 案例 2,严格模式,this -> undefined

      function simple2() {

        'use strict';

        console.log("案例 2,严格模式");

        console.log("我是严格模式,this 指向 undefined");

        console.log(this);

      }

      simple2();

    #构造函数

    当我们调用 new UserJavaScript 会在 User 函数内创建一个新对象并把它保存为 this 。接着,name, age 和 info 属性会被添加到新创建的 this 对象上。

      // 案例 3,构造函数,此时在执行上下文中创建了 this 对象,并在这个 this 对象中增加了 name, age, info 三个属性

      function User(name, age) {

        this.name = name;

        this.age = age;

     

        this.info = function () {

          console.log("我是 User 对象中的 info 属性")

          console.log(`${this.name} ${this.age}`);

        };

        console.log("案例 3,构造函数");

        console.log("我是 User 对象,我在执行上下文中创建了 this 对象,并增加了 name, age, info 三个属性");

        console.log(this);

      }

      let andy = new User('Andy', 22);

      andy.info();

    简单对象 1

    当某个属性被发起普通函数调用时,则 this 指向 window 对象

      // 案例 4,简单对象

      let user = {

        name: '小明',

        age: userAgeFunction,

        sex: function () {

          console.log("我是 user 对象的 sex 属性,this 指向 user 对象,而不是全局对象");

          console.log(this);

        },

        talk: function () {

          console.log(this);

        }

      };

      function userAgeFunction() {

        console.log("我是 user 对象的 age 属性,this 指向 user 对象,而不是全局对象");

        console.log(this);

      }

      console.log("案例 4,简单对象");

      user.age();

      user.sex();

     

      let talk = user.talk;

      console.log("我是 talk,我把 user 对象的 talk 属性当普通函数调用了,所以这里的 this 指向 window");

      talk();

    简单对象 2

    age 函数内部, this 指向 lee 对象,但是,在 innerAge 函数内部,this 指向全局对象,规则告诉我们无论何时一个普通函数被调用时,那么 this 将指向全局对象。

      // 案例 5,简单对象 2

      let lee = {

        name: 'lee',

        birth: 1998,

        age: function () {

          console.log("我是 lee 对象的 age 属性,this 指向 lee 对象,而不是全局对象");

          console.log(this);

          function innerAge() {

            console.log("我虽然是 lee 对象中的 age 属性中的 innerAge() 函数,但我会被普通调用,所以这里的 this 指向 window,而不是 lee 对象");

            console.log(this);

          }

          // 这里发起 lee 对象 age 属性内部的 innerAge() 普通调用,所以该函数中的 this 指向 window

          innerAge();

        }

      };

      console.log("案例 5,简单对象");

      lee.age();

    call、apply、bind

    • call:将 this 指向目标对象
    • apply:将 this 指向目标对象,在参数形式为数组时使用该方法
    • bind:将 this 指向传递的第一个参数并返回一个新方法

        function User(username, password) {

            this.username = username;

            this.password = password;

            this.displayUser = function() {

                console.log(`User: ${this.username} ${this.password}`);

            }

        }

     

        let user1 = new User("admin", "123456");

        let user2 = new User("guest", "abcdef");

     

        console.log("案例 6,call apply bind");

        console.log("我是 user1 对象");

        user1.displayUser();

        console.log("我是 user2 对象")

        user2.displayUser();

        console.log("我是 user1 对象,我使用了 call 方法将我的 this 指向了 user2")

        user1.displayUser.call(user2);

        console.log("我是 user1 对象,我使用了 apply 方法将我的 this 指向了 user2")

        user1.displayUser.apply(user2);

        console.log("我是 user1 对象,我使用了 bind 方法将我的 this 指向了 user2 并返回了一个新的方法")

        let user2Display = user1.displayUser.bind(user2)

        user2Display()

  • 相关阅读:
    基于xmpp openfire smack开发之Android客户端开发[3]
    简单工厂,抽象工厂,工厂模式三者的对照
    【独具慧眼 推荐有礼】找出您心中的技术大牛 活动開始啦!
    ZOJ 3201
    具体解释站点沙盒期的原因表现与解决的方法
    工作,究竟意味着什么
    MVC之查询demo
    学习开淘宝网店
    快排的两种写法
    QTableWidget具体解释(样式、右键菜单、表头塌陷、多选等) (非代理)
  • 原文地址:https://www.cnblogs.com/lingboweifu/p/11897844.html
Copyright © 2020-2023  润新知