前端技术文档前端技术文档
前端技术文档
  • HTML 文档
  • CSS 文档
  • JavaScript 文档
  • Browser 文档
  • Environment 文档
  • IMGProcess 文档
  • Interview 文档
前端技术文档
  • HTML 文档
  • CSS 文档
  • JavaScript 文档
  • Browser 文档
  • Environment 文档
  • IMGProcess 文档
  • Interview 文档
  • JavaScript 文档
  • JavaScript变量提升
  • JS事件流模型
  • JS中this的指向
  • Js异步机制
  • JavaScript闭包
  • Js严格模式
  • Js中==与===
  • Js箭头函数
  • Js中Array对象
  • Js中Date对象
  • Js中Math对象
  • Js中Number对象
  • Js中String对象
  • Js中Symbol对象
  • Js中RegExp对象
  • Js中Proxy对象
  • Js中Reflect对象
  • Js中fetch方法
  • Js创建对象的方式
  • Js数组操作
  • Js实现数组排序
  • Js实现链表操作
  • Js实用小技巧
  • Js将字符串转数字的方式
  • Js捕获异常的方法
  • Js文件异步加载
  • Js模块化导入导出
  • Js模块化开发的理解
  • Js的GC机制
  • Js中的位操作符
  • Js中的逻辑运算符
  • Js中的堆栈
  • Js中数组空位问题
  • ES6新特性
  • Function与Object
  • Generator函数
  • Js选择器
  • JSON WEB TOKEN
  • Js中Currying的应用

JS中this的指向

this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象。

实例

定义函数与对象并调用,注意只有调用函数才会使this指向调用者,但箭头函数除外。

function s(){
    console.log(this);
}

// window中直接调用 // 非 use strict
s(); // Window // 等同于window.s(),调用者为window
// window是Window的一个实例 // window instanceof Window //true

// 新建对象s1
var s1 = {
    t1: function(){ // 测试this指向调用者
        console.log(this); // s1
        s(); // Window // 此次调用仍然相当 window.s(),调用者为window
    },
    t2: () => { // 测试箭头函数,this并未指向调用者
        console.log(this);
    },
    t3: { // 测试对象中的对象
      tt1: function() {
           console.log(this);
      }  
    },
    t4: { // 测试箭头函数以及非函数调用this并未指向调用者
      tt1: () => {
           console.log(this);
      }  
    },
    t5: function(){ // 测试函数调用时箭头函数的this的指向,其指向了上一层对象的调用者
        return {
            tt1: () => {
                console.log(this);
            }
        }
    }
}
s1.t1(); // s1对象 // 此处的调用者为 s1 所以打印对象为 s1
s1.t2(); // Window
s1.t3.tt1(); // s1.t3对象
s1.t4.tt1(); // Window
s1.t5().tt1(); // s1对象

比较特殊的例子,我们调用同一个方法,但是得到的this是不同的,要注意实际上this的最终指向的是那个调用它的对象。

var s1 = {
    t1: function(){
        console.log(this);
    }
}
s1.t1(); // s1对象
var p = s1.t1;
p(); // Window

// 注意此时将方法赋值给了p,此时直接调用p得到的this是Window
// 其实这个例子也并不是很特殊,因为函数也是一个对象,此时p是被赋值了一个函数
console.log(p); // ƒ (){console.log(this);}
// 而此函数是被window调用的,由此,this指向了window

改变this指向

使用 apply、call、bind可以改变this的指向,可以参考
https://github.com/WindrunnerMax/EveryDay/blob/master/JavaScript/apply%E3%80%81call%E3%80%81bind.md

每日一题

https://github.com/WindrunnerMax/EveryDay

参考

http://www.ruanyifeng.com/blog/2018/06/javascript-this.html
Prev
JS事件流模型
Next
Js异步机制