鸿蒙-JS-第三周day03

多喝热水呀!

于 2024-08-27 17:21:31 发布

阅读量182

点赞数 8

文章标签： javascript 前端 typescript

本文链接：https://blog.csdn.net/2401_83335728/article/details/141608163

版权

THIS的五种情况汇总：

1、在事件绑定中：

给当前元素的某事件行为绑定方法，事件行为触发，此时方法中的this是当前操作元素本身

2、普通方法执行看“点”

2-1、方法执行看前面有没有点，如果有，点前面是谁，this就是谁，如果没有，this就是window，

或者严格模式下的undefined

2-2、自执行的函数一般是window，严格模式下是undefined

2-3、回调函数：一般来说是window,除非在执行回调函数「内部方法」做了特殊处理

3、构造函数执行「new 执行」

构造函数体中的this是当前类的实例

4、箭头函数中（含块级上下文）没有自己的this，所用的this是上级上下文「宿主环境」的this，

箭头函数好用但是不能滥用，不涉及this随便用

5、基于Function.prototype上的call、bind、apply强制改变this指向

1、全局下指的是window

console.log(this);

2、函数调用的情况

函数执行就看函数前有没有点，如果有，点前面是谁，this就是谁，如果没有，this就是window，或者严格模式下的undefined

//'use strict'
function fn(){
  console.log(this)
}
fn();//这里的this就是window，在严格模式下就是undefined

var obj={
  name:"li",
  fn:fn,
}

obj.fn();//这里的this就是obj

自执行的函数一般是window，严格模式下是undefined

//'use strict';
(function () {
      console.log(this)//window
})()

回调函数：一般来说是window,除非在执行回调函数「内部方法」做了特殊处理

<body>
  <div id="box">11111</div>
  <script>
    box.onclick = function () {
      console.log(this)
    }
  </script>
</body>

setTimeout(function (){
   console.log(this);
}, 1000);

THIS练习题

1、

var name="培训";
function fn(){
   console.log(this.name)
}
var obj={
  name:"你好世界",
  fn:fn
}
obj.fn();
fn();

(function(){
  this.fn();
})();

答案：你好世界培训培训

2、

var a = 10;
function foo () {
  console.log(this.a)
}
foo();

答案：10

3、

var a = 10;
function foo () {
  console.log('this1', this)
  console.log(window.a)
  console.log(this.a)
}
console.log(window.foo)
console.log('this2', this)
foo();

答案：函数 window window 10 10

4、

let a = 10
const b = 20

function foo () {
  console.log(this.a)
  console.log(this.b)
}
foo();
console.log(window.a)

答案：undefined undefined undefined

5、

var a = 1
function foo () {
  var a = 2
  console.log(this)
  console.log(this.a)
}

foo()

答案：window 1

6、

var obj1 = {
  a: 1
}
var obj2 = {
  a: 2,
  foo1: function () {
    console.log(this.a)
  },
  foo2: function () {
    setTimeout(function () {
      console.log(this)
      console.log(this.a)
    }, 0)
  }
}
var a = 3

obj2.foo1()
obj2.foo2()

答案：2 window 3

7、

let obj={
  name:"li",
  fn:(function(n){
       // 这里的this
       console.log(this);
       return function(){
          // 这里的this
          console.log(this);
       }
  })(10),
}
obj.fn();

答案：window 对象obj

8、

function fn(){
  // 这里的this
  console.log(this);
}
box.onclick=function(){
    console.log(this);
    fn()
}

答案：box元素 window

9、

var num=10;
var obj={num:20};
obj.fn=(function(num){
   this.num=num*3;
   num++;
   return function(n){
       this.num+=n;
       num++;
       console.log(num);
   }
})(obj.num);
var fn=obj.fn;
fn(5);
obj.fn(10);
console.log(num,obj.num)

答案：22 23 65 30

10、

var obj = {
  name: 'obj',
  foo1: () => {
    console.log(this.name)
  },
  foo2: function () {
    console.log(this.name)
    return () => {
      console.log(this.name)
    }
  }
}
var name = 'window'
obj.foo1()
obj.foo2()()

答案：window obj obj

11、

var name = 'window'
var obj1 = {
	name: 'obj1',
	foo: function () {
		console.log(this.name)
	}
}

var obj2 = {
	name: 'obj2',
	foo: () => {
		console.log(this.name)
	}
}

obj1.foo()
obj2.foo()

答案：obj1 window

12、

var name = 'window'
var obj1 = {
  name: 'obj1',
  foo: function () {
    console.log(this.name)
    return function () {
      console.log(this.name)
    }
  }
}
var obj2 = {
  name: 'obj2',
  foo: function () {
    console.log(this.name)
    return () => {
      console.log(this.name)
    }
  }
}
var obj3 = {
  name: 'obj3',
  foo: () => {
    console.log(this.name)
    return function () {
      console.log(this.name)
    }
  }
}
var obj4 = {
  name: 'obj4',
  foo: () => {
    console.log(this.name)
    return () => {
      console.log(this.name)
    }
  }
}

obj1.foo()()
obj2.foo()()
obj3.foo()()
obj4.foo()()

答案：

obj1.foo()() // 'obj1' 'window'
obj2.foo()() // 'obj2' 'obj2'
obj3.foo()() // 'window' 'window'
obj4.foo()() // 'window' 'window'

多喝热水呀!

关注

8
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
鸿蒙-JS-第三周day03

THIS的五种情况汇总：1、在事件绑定中：给当前元素的某事件行为绑定方法，事件行为触发，此时方法中的this是当前操作元素本身2、普通方法执行看“点”2-1、方法执行看前面有没有点，如果有，点前面是谁，this就是谁，如果没有，this就是window，或者严格模式下的undefined2-2、自执行的函数一般是window，严格模式下是undefined2-3、回调函数：一般来说是window,除非在执行回调函数「内部方法」做了特殊处理3、构造函数执行「new 执行」
复制链接

扫一扫