this指向问题

this主要有以下几个使用场合。
(1)全局环境

全局环境使用this,它指的就是顶层对象window。

javascript 复制代码
this === window // true

function f() {
  console.log(this === window);
}
f() // true

(2)构造函数

构造函数中的this,指的是实例对象

javascript 复制代码
var Obj = function (p) {
  this.p = p;
};

var o = new Obj('Hello World!');
o.p // "Hello World!"

(3)对象的方法

如果对象的方法里面包含this,this的指向就是方法运行时所在的对象。该方法赋值给另一个对象,就会改变this的指向

javascript 复制代码
var A = {
   name: '张三',
   describe: function () {
      console.log('姓名:'+ this.name);
   }
};

var B = {
    name: '李四'
};

var name = '王五';

B.describe = A.describe;
A.describe(); // "姓名:张三"
B.describe(); // "姓名:李四"

var f =  A.describe;
f(); // "姓名:王五"

如果this所在的方法不在对象的第一层,这时this只是指向当前一层的对象,而不会继承更上面的层。

javascript 复制代码
var a = {
  p: 'Hello',
  b: {
    m: function() {
      console.log(this.p);
    }
  }
};

a.b.m() // undefined
// a.b.m方法在a对象的第二层,该方法内部的this不是指向a,而是指向a.b

如果将嵌套对象内部的方法赋值给一个变量,this依然会指向全局对象。

javascript 复制代码
var a = {
  b: {
    m: function() {
      console.log(this.p);
    },
    p: 'Hello'
  }
};

var hello = a.b.m;
hello() // undefined

上面代码中,m是多层对象内部的一个方法。为求简便,将其赋值给hello变量,结果调用时,this指向了顶层对象。为了避免这个问题,可以只将m所在的对象赋值给hello,这样调用时,this的指向就不会变。

javascript 复制代码
var hello = a.b;
hello.m() // Hello

(4)call()、apply()、bind()显性绑定

javascript 复制代码
window.age = 29;
let a = {
    age: 33
};
let b = {
    age: 66
};
function sayAge() {
    console.log(this.age);
}
sayAge();    // 29 this值默认为window对象
sayAge.call(a);    // 33 将this值显性切换为对象a
sayAge.apply(b);     // 66 将this值显性切换为对象b

let sayAgeAgain = sayAge.bind(a);    // 创建新函数sayAgeAgain
sayAgeAgain();    // 33

bind跟call、apply的不同之处在于:它控制函数this值的同时,会创建一个新的函数(准确来说是改变新函数的this值)。

(5)箭头函数

箭头函数没有自己的this对象,内部的this就是定义时上层作用域中的this,箭头函数内部的this是固定的,不可变,而普通函数的this指向是可变的

javascript 复制代码
window.color = 'red';
let obj = {
    color: 'blue'
};
// 此时箭头函数sayColor()声明在全局上下文
let sayColor = () => console.log(this.color);
obj.sayColor = sayColor;

obj.sayColor();     // 依旧为red
sayColor.call(obj); // 依旧为red 


function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}
var id = 21;
foo.call({ id: 42 });
// id: 42

由于箭头函数没有自己的this,所以当然也就不能用call()、apply()、bind()这些方法去改变this的指向。

相关推荐
_OP_CHEN11 分钟前
C++基础:(十二)list类的基础使用
开发语言·数据结构·c++·stl·list类·list核心接口·list底层原理
blackorbird1 小时前
Edge 浏览器 IE 模式成攻击突破口:黑客借仿冒网站诱导攻击
前端·edge
谷歌开发者2 小时前
Web 开发指向标 | Chrome 开发者工具学习资源 (一)
前端·chrome·学习
名字越长技术越强2 小时前
Chrome和IE获取本机ip地址
前端
天***88962 小时前
Chrome 安装失败且提示“无可用的更新” 或 “与服务器的连接意外终止”,Chrome 离线版下载安装教程
前端·chrome
半梦半醒*2 小时前
zabbix安装
linux·运维·前端·网络·zabbix
大怪v3 小时前
【搞发🌸活】不信书上那套理论!亲测Javascript能卡浏览器Reader一辈子~
javascript·html·浏览器
清羽_ls3 小时前
React Hooks 核心规则&自定义 Hooks
前端·react.js·hooks
你的人类朋友3 小时前
“签名”这个概念是非对称加密独有的吗?
前端·后端·安全
西陵3 小时前
Nx带来极致的前端开发体验——任务缓存
前端·javascript·架构