this

this 取什么值是在函数执行的时候确认的,不是在函数定义的时候确认的

this 的不同应用场景,this 的指向

函数在调用时,js 会默认给 this 绑定一个值,this 的值与绑定方式、调用方式和调用位置有关,this 是在运行时被绑定的。下面有几种 this 的应用场景:

  • 当作普通函数被调用
  • 作为对象的方法被调用
  • 使用 call、apply、bind
  • 监听 DOM 事件所执行的函数
  • 在 class 的方法中调用
  • 箭头函数

1.0 当作普通函数被调用

普通函数的独立调用可以称为默认绑定,指向 window

function fn() {
console.log(this);
}
fn() // window
// 定时器内部是用 apply 把 this 绑定在 window 上
// 所以定时器指向的也是 window
setTimeout(function() {
console.log(this) // window
},0)

2.0 作为对象的方法被调用

函数是通过某个对象进行调用可以称为隐式绑定,指向拥有该方法的对象

  • 如果有多个对象进行嵌套,this 指向的是调用位置,也就是第一个对象
  • 如果你把对象里的函数赋值给新的变量来调用,那么 this 指向的是新的变量
function fn() {
console.log(this);
}
var obj1 = {
name: "obj1",
fn: fn
}
obj1.fn() // obj1对象
// 如果有多个对象进行嵌套,this 指向的是调用位置,也就是第一个对象
var obj2 = {
name: "obj2",
obj1: obj1
}
obj2.obj1.fn() // obj1对象
// 如果你把对象里的函数赋值给新的变量来调用,那么 this 指向的是新的变量
var newFn = obj.fn
newFn() // window

3.0 使用 call、apply、bind

使用这种方法是对象内部不想放入该函数,然后通过绑定的方式进行调用,这种绑定可以称为显式绑定,指向方法所绑定的对象

function fn() {
console.log(this);
}
var obj = {
name: "fan",
}
fn.call(obj) // {name: "fan"}
fn.apply(obj.name) // String {"fan"}
// bind() 返回的是一个函数
var foo = fn.bind(obj)
foo() // {name: "fan"}

4.0 监听 DOM 事件所执行的函数

给 dom 添加点击事件,当用户点击后,绑定的函数被调用时,会执行回调,把函数绑定到 box 元素节点,指向的是所绑定的元素节点

var div = document.createElement('div')
div.setAttribute('id','box')
div.style.width = "100px"
div.style.height = "100px"
div.style.background = "#ccc"
document.body.appendChild(div)
var box = document.querySelector('#box')
box.onclick = function() {
console.log(this) // box节点
}

5.0 在 class 的方法中调用

class 和构造函数是一个意思,都是通过 new 关键字来实例化,实例化会创建一个全新的对象,这个对象的的原型对象会等于类的原型 fan.__proto__ === Student.prototype ,方法调用的时候,指向的是实例化出来的新对象

class Student {
constructor(name) {
this.name = name
}
sayHi() {
console.log(this);
}
}
var fan = new Student("fan")
console.log(fan) // fan 对象
fan.sayHi() // fan 对象

6.0 箭头函数

箭头函数是没有 this 的,它的 this 是通过外层作用域来决定的

var obj = {
fn: () => {
console.log(this)
}
}
obj.fn() // window

this 的规则优先级

new绑定 > 显式绑定(bind)> 隐式绑定 > 默认绑定

手写 bind 函数

// 实现 bind 函数
Function.prototype.bind1 = function(...args) {
// 获取传入的值
// const arr = Array.prototype.slice.call(arguments)
const arr = [...args]; // 获取 this (数组第一项)
const t = arr.shift() // fn1.bind(...) 中的 fn1
const self = this; // return 一个函数
return function() {
return self.apply(t, arr)
}
} function fn(a, b) {
console.log('this', this);
console.log(a, b);
return 'this is fn'
} const fn2 = fn.bind1({x: 100}, 100, 200)
const res = fn2()
console.log(res);

this 面试题

面试题一

var name = "window";
var person = {
name: "person",
sayName: function () {
console.log(this.name);
}
};
function sayName() {
var sss = person.sayName;
sss(); // window
person.sayName(); // person
(person.sayName)(); //person
(b = person.sayName)(); //window
}
sayName();

面试题二

var name = 'window'
var person1 = {
name: 'person1',
foo1: function () {
console.log(this.name)
},
foo2: () => console.log(this.name),
foo3: function () {
return function () {
console.log(this.name)
}
},
foo4: function () {
return () => {
console.log(this.name)
}
}
} var person2 = { name: 'person2' } person1.foo1(); // person1
person1.foo1.call(person2); // person2 person1.foo2(); // window
person1.foo2.call(person2); // window person1.foo3()(); // window
person1.foo3.call(person2)(); // window
person1.foo3().call(person2); // person2 person1.foo4()(); // person1
person1.foo4.call(person2)(); // person2
person1.foo4().call(person2); // person1

易错解析:(箭头函数只看上层作用域)

person1.foo2.call(person2) // foo2() 是箭头函数,不适用于显示绑定的规则
person1.foo3()() // 相当于在全局调用 foo3() 返回的函数
person1.foo3.call(person2)() // 显式绑定到 person2 中调用该函数,还是返回一个函数在全局调用
person1.foo3().call(person2) // 拿到返回值再进行显式绑定,绑定的就是没有返回值的函数,相当于调用 person2 中的方法
person1.foo4.call(person2)() // 显式绑定之后调用,返回的是箭头函数,箭头函数向上层作用域找,找到的是 显式绑定的 person2
person1.foo4().call(person2) // 显式绑定之前调用,返回的箭头函数向上层作用域找,找到的是 person1

面试题三

var name = 'window'
function Person (name) {
this.name = name
this.foo1 = function () {
console.log(this.name)
},
this.foo2 = () => console.log(this.name),
this.foo3 = function () {
return function () {
console.log(this.name)
}
},
this.foo4 = function () {
return () => {
console.log(this.name)
}
}
}
var person1 = new Person('person1')
var person2 = new Person('person2') person1.foo1() // person1
person1.foo1.call(person2) // person2 person1.foo2() // person1
person1.foo2.call(person2) // person1 person1.foo3()() // window
person1.foo3.call(person2)() // window
person1.foo3().call(person2) // person2 person1.foo4()() // person1
person1.foo4.call(person2)() // person2
person1.foo4().call(person2) // person1

面试题四

var name = 'window'
function Person (name) {
this.name = name
this.obj = {
name: 'obj',
foo1: function () {
return function () {
console.log(this.name)
}
},
foo2: function () {
return () => {
console.log(this.name)
}
}
}
}
var person1 = new Person('person1')
var person2 = new Person('person2') person1.obj.foo1()() // window
person1.obj.foo1.call(person2)() // window
person1.obj.foo1().call(person2) // person2 person1.obj.foo2()() // obj
person1.obj.foo2.call(person2)() // person2
person1.obj.foo2().call(person2) // obj

解析:

person1.obj.foo1()() // obj.foo1()返回的是一个函数,这个函数会在全局执行
person1.obj.foo1.call(person2)() // 最后拿到的还是返回的函数,会在全局执行
person1.obj.foo2()() // 返回一个箭头函数,只要记住是箭头函数就往上层作用域找

理解 this的更多相关文章

  1. 理解CSS视觉格式化

    前面的话   CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应 ...

  2. 彻底理解AC多模式匹配算法

    (本文尤其适合遍览网上的讲解而仍百思不得姐的同学) 一.原理 AC自动机首先将模式组记录为Trie字典树的形式,以节点表示不同状态,边上标以字母表中的字符,表示状态的转移.根节点状态记为0状态,表示起 ...

  3. 理解加密算法(三)——创建CA机构,签发证书并开始TLS通信

    接理解加密算法(一)--加密算法分类.理解加密算法(二)--TLS/SSL 1 不安全的TCP通信 普通的TCP通信数据是明文传输的,所以存在数据泄露和被篡改的风险,我们可以写一段测试代码试验一下. ...

  4. node.js学习(三)简单的node程序&&模块简单使用&&commonJS规范&&深入理解模块原理

    一.一个简单的node程序 1.新建一个txt文件 2.修改后缀 修改之后会弹出这个,点击"是" 3.运行test.js 源文件 使用node.js运行之后的. 如果该路径下没有该 ...

  5. 如何一步一步用DDD设计一个电商网站(一)—— 先理解核心概念

    一.前言     DDD(领域驱动设计)的一些介绍网上资料很多,这里就不继续描述了.自己使用领域驱动设计摸滚打爬也有2年多的时间,出于对知识的总结和分享,也是对自我理解的一个公开检验,介于博客园这个平 ...

  6. 学习AOP之透过Spring的Ioc理解Advisor

    花了几天时间来学习Spring,突然明白一个问题,就是看书不能让人理解Spring,一方面要结合使用场景,另一方面要阅读源代码,这种方式理解起来事半功倍.那看书有什么用呢?主要还是扩展视野,毕竟书是别 ...

  7. ThreadLocal简单理解

    在java开源项目的代码中看到一个类里ThreadLocal的属性: private static ThreadLocal<Boolean> clientMode = new Thread ...

  8. JS核心系列:理解 new 的运行机制

    和其他高级语言一样 javascript 中也有 new 运算符,我们知道 new 运算符是用来实例化一个类,从而在内存中分配一个实例对象. 但在 javascript 中,万物皆对象,为什么还要通过 ...

  9. 深入理解JS 执行细节

    javascript从定义到执行,JS引擎在实现层做了很多初始化工作,因此在学习JS引擎工作机制之前,我们需要引入几个相关的概念:执行环境栈.全局对象.执行环境.变量对象.活动对象.作用域和作用域链等 ...

  10. 浅谈我对DDD领域驱动设计的理解

    从遇到问题开始 当人们要做一个软件系统时,一般总是因为遇到了什么问题,然后希望通过一个软件系统来解决. 比如,我是一家企业,然后我觉得我现在线下销售自己的产品还不够,我希望能够在线上也能销售自己的产品 ...

随机推荐

  1. hdu5040 不错的广搜

    题意:       给你一个地图,让你从起点走到终点,然后图上有空地,墙,还有摄像头,摄像头有初始方向,每一秒摄像头都会顺时针旋转90度,每个摄像头有自己的观察范围,它所在的点,和当前它面向的那个点, ...

  2. Python 第二章-列表和元组

    第二章-列表和元组 2.0      在Python中,最基本的数据结构是序列(sequence).序列中的每个元素被分配一个序列号-即元素的位置, 也称为索引.第一个索引是0,第二个是1,以此类推. ...

  3. 在进程空间使用虚拟内存(Windows 核心编程)

    虚拟内存空间 如今的 Windows 操作系统不仅可以运行多个应用程序,还可以让每一个应用程序享受到约 4 GB 的虚拟内存空间(包括系统占用),假如内存为 4 GB 的话.那为什么 Window 可 ...

  4. C#-宽带连接

    public static string Connect(string UserS,string PwdS) { string arg = @"rasdial.exe 宽带连接" ...

  5. Govern Service 基于 Redis 的服务治理平台

    Govern Service 基于 Redis 的服务治理平台(服务注册/发现 & 配置中心) Govern Service 是一个轻量级.低成本的服务注册.服务发现. 配置服务 SDK,通过 ...

  6. 推荐一些学习MySQL的资源

    前言: 在日常工作与学习中,无论是开发.运维.还是测试,对于数据库的学习是不可避免的,同时也是日常工作的必备技术之一.在互联网公司,开源数据库用得比较多的当属MySQL了,相信各位小伙伴关注我的原因也 ...

  7. kubernetes dashboard延长自动超时注销

    方法1:部署清单时,修改yaml文件,添加 container.Args 增加 --token-ttl=43200 其中43200是设置自动超时的秒数.也可以设置 token-ttl=0 以完全禁用超 ...

  8. CENTOS7network config文件不能直接bak 必须建立bak目录再bak

    CENTOS7network config文件不能直接bak 必须建立bak目录再bak

  9. 【转载】windows linux cent 7 制作U盘 启动盘

    1 镜像iso文件存放在linux环境下用dd if=/dev/sdb of=/镜像存放路径/镜像iso文件 bs=1M u盘的盘符是/dev/sdb 2 镜像iso文件存放在windows环境下ul ...

  10. 理解RESTful架构——Restful API设计指南

    理解RESTful架构 Restful API设计指南 理解RESTful架构 越来越多的人开始意识到,网站即软件,而且是一种新型的软件. 这种"互联网软件"采用客户端/服务器模式 ...