JS this的三种指向+基础练习

文章目录

• JS this的三种指向+基础练习
• • 事先提示:
  • 正常情况下:
  • • 普通函数
    • 对象
    • 构造函数
  • this指向练习：
  • • 练习1
    • 练习2
    • 练习3
    • 练习4

事先提示:

正常情况下:

普通函数

function one(){
  console.log(this);  ==>window
}
one()

对象

const xWang = {
 name: "小王",
 age: 18,
 intro: function () {
   console.log(this) 
//==>指向自身{ name: '小王', 
//age: 18, intro: [Function: intro] }
 }
}
xWang.intro()

构造函数

function People(name, age) {
  this.name = name
  this.age = age
  this.intro = function () {
    console.log(this);
  }
}
let xMin = new People("小明", 20)
let xBai = new People("小白", 10)
xMin.intro()
//==>People { name: '小明', age: 20, intro: [Function (anonymous)] }
xBai.intro()
//==>People { name: '小白', age: 10, intro: [Function (anonymous)] }

this指向练习：

练习1

var obj1 = {
	name:"张三",
	eat:function(){
		console.log(this.name);==>张三 
		obj2.eat()
	}
}

var obj2 = {
	name:"李四",
	eat:function() {
		console.log(this.name) ==>李四
	}
}
obj1.eat()

练习2

var obj = {
  name: "pig",
  showName: function () {
    fn1()
  }
}

function fn1() {
  console.log(this.name) ==>undefined
}
obj.showName()

练习3

const one = {
name: "小白",
show: function () {
  console.log(this); ==>指向对象one
  setTimeout(this.count, 300); ==>调用count函数
},
count: function () {
  console.log(this); ==>指向window
}
}

练习4

const one = {
 name: "小白",
 show: function () {
  setTimeout(
    this.count(), 300);
 },
 count: function () {
  return function () {
  	console.log(this) ==>window
    console.log(3 + this.num); ==>NaN
  }
 }
 }
 
 one.show()