javascript中This的几种赋值情况

首先注意一点： this取什么值是再函数执行的时候被确定的，不是再定义的时候被确定的【非常重要】

下面是5种赋值情况，大家可以再自己电脑上写一写打印出来看看

1.作为普通函数被调用

function fn(){

console.log(this) // window

}

fn() // window

2.使用call apply bind 被调用

fn1.call({x:100}) // this是{x:100} 调用的对象

const fn2 = fn1.bind( {x:200})

fn2() // this 是 {x:200} 调用的对象

3.作为对象方法被调用

const zhangsan = {

name:'张三',

sayHi(){

console.log(this) // this是zhangsan这个对象，因为是zhangsan.sayHi()被执行

wait(){

setTimeout(function(){

console.log(window) //this===window 因为setTimeOut之后当这个方法被执行时候，就是再window下面执行的

})

waitAgain(){

setTimeOut(()=>{

console.log(this) // zhangsan 箭头函数的this指向上级作用域的this

})

}

4.再class方法中被调用

class People{

constructor(){

this.name = name; // this 创建的实例

this.age = 20;

}

sayHi(){ console.log(this) } // this就是zhangsan这个实例

}

const zhangsan = new People('zhangsan')

zhangsan.sayHi() // zhangsan对象

5.箭头函数

箭头函数的this指向上级作用域的this

javascript中This的几种赋值情况相关推荐

javascript中面向对象的5种写法
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...
[译]JavaScript中的属性:定义和赋值的区别
原文:http://www.2ality.com/2012/08/property-definition-assignment.html 你知道吗?定义一个属性和为一个属性赋值是有区别的.本文解释了两 ...
JavaScript中常见的几种“缺少对象”错误
在JavaScript中,程序调度过程中经常会出现缺少对象错误,这里的对象有时候是变量,有时候是函数,有时候可能是对象等等. 缺少对象错误经常有以下几种情况 1.变量没有定义使用没定义的变量时就会出 ...
JavaScript中数组的几种写法
1.直接new一个数组,不指定数组长度,使用数组下标给数组赋值,数组中可以存放任意类型的数据.(遍历时未赋值的元素将会显示undefined): <!DOCTYPE html> <h ...
JavaScript中函数的三种定义方法
JavaScript中函数定义的三种方法. 函数的三种定义方法分别是:函数定义语句.函数直接量表达式和Function()构造函数的方法.下面依次介绍这几种方法具体怎么实现. 1. 函数定义语句 // ...
JavaScript中this的五种绑定方式详解
1 this的五种绑定方式 1.1 默认绑定默认绑定是指当函数调用时,没有为其指定对象上下文,此时会将该函数的this绑定到全局对象(window对象).自ES5有了严格模式之后,默认绑定方式又分为 ...
创建函数查找上级_一文秒懂JavaScript中对象的7种创建方式
1.工厂模式 javascript 代码工厂模式:能根据接受的参数来创建出一个person对象.也可以无数次的调用这个函数,每次都会返回一个包含3个属性和1个方法的对象. 工厂模式虽然解决了创建多个 ...
javaScript中常见的几种报错类型
一般我们运行代码的时候,在控制台报错会相应的显示你错误的行数,找到那一行,查找你相应的错误 1.xxx is not defined xxx 没有定义 2.xxx is not a functio ...
javascript中数组的22种方法
前面的话数组总共有22种方法,本文将其分为对象继承方法.数组转换方法.栈和队列方法.数组排序方法.数组拼接方法.创建子数组方法.数组删改方法.数组位置方法.数组归并方法和数组迭代方法共10类来进行详细 ...

javascript中This的几种赋值情况

javascript中This的几种赋值情况相关推荐

最新文章

热门文章