zoukankan      html  css  js  c++  java
  • JavaScript this的指向

    this 的指向有几种情况:

    1. 全局对象(指向 window);
    2. 作为普通函数调用(指向 window);
    3. 作为对象方法调用(一般指向该对象);
    4. 构造器调用(一般指向构造器函数);
    5. Function.prototype.call 或 Function.prototype.apply 调用(指向 Function)。

    1. 全局对象的this

     

     1 console.log(this); // this指向于window
     2 
     3  function test(){
     4     console.log(11);
     5  }
     6  setTimeout(function(){
     7     console.log(this === window); // true
     8     this.test(); // 11 
     9  });
    10 //setTimeout() 和 setInterval()函数内部的 this 指针是指向于 window 的

     

    2. 作为普通函数调用

    1 var name = "longen";
    2 function test(){
    3     return this.name;
    4 }
    5 console.log(test()); // longen

     

    3. 作为对象方法调用

    1 var obj = {
    2     "name": "我的名字改了",
    3     getName: function(){
    4         console.log(this); // 在这里this指向于obj对象了
    5         console.log(this.name); // 打印 我的名字改了
    6     }
    7 };
    8 obj.getName(); // 直接调用对象方法

    以上是直接调用对象方法时,this 指向该对象,但是我们不能像下面这样调用对象的方法,运行函数 yunxi() 时就相当于调用了普通函数,这时 this 会指向 window :

     1 var name = "全局对象名字";
     2 var obj = {
     3     "name": "我的花名改为云溪了,就是为了好玩",
     4     getName: function(){
     5         console.log(this);  // window
     6         console.log(this.name); // 全局对象名字
     7     }
     8 };
     9 var yunxi = obj.getName; 
    10 yunxi();

    4. 构造器调用

    在 Javascript 中不像 Java 一样,有类的概念,在 JS 中只能通过构造器创建对象,当 new 运算符调用函数时,该函数会返回一个对象,一般情况下,构造器里面的 this 就指向返回的这个对象;

    1 var Test = function(){
    2     this.name = "xiao";
    3 };
    4 var test = new Test();
    5 console.log(test.name); // xiao

    注意:构造器函数第一个字母需要大写,这是为了区分普通函数和构造器函数。

    但是也有例外的情况,当构造器返回了一个对象时,此时继续调用,this 指向返回的那个对象:

    1 var obj = function(){
    2     this.name = "xiao";
    3     return {
    4         "age": "27"
    5     }
    6 };
    7 var test = new obj();
    8 console.log(test.name); // undefined,此时 this 指向返回的对象,对象里只有 age 属性,所以返回 undefined

    学习资源:javascript中的this详解

  • 相关阅读:
    js连等赋值与对象引用
    es6读书笔记(四)——顶层对象
    es6读书笔记(三)——const
    es6读书笔记(二)——块级作用域
    es6读书笔记(一)——let
    Idea工具使用junit运行单元测试(三):测试套件
    Python学习笔记(十二):列表生成式、三元表达式、字典排序
    python学习笔记(六):内置函数
    扫描歌曲
    为Activity设置特定权限才能启动
  • 原文地址:https://www.cnblogs.com/xiaochechang/p/5740353.html
Copyright © 2011-2022 走看看