大厂面试题他来啦,js中this的基本情况分析,拿来吧你~

1,121 阅读2分钟

这是我参与8月更文挑战的第12天,活动详情查看:8月更文挑战

大家好,我是圈圈,热爱前端,喜欢分享,很感谢这个活动,我希望我可以坚持,感谢你那么好看,还看了我的文章,欢迎大家评论区交流切磋~

THIS:函数执行的主体(谁执行的函数)

  • 事件绑定
  • 函数执行[普通函数执行、成员访问]
  • 构造函数
  • 箭头函数[生成器函数generator]
  • 基于call/apply/bind强制修改this指向
  • ...
  1. ->全局上下文中的this:window
  2. ->块级上下文没有自己的this,所用的this都是继承上级上下文中的this[箭头函数也是]
  3. 事件绑定

// 给当前元素的某个事件行为绑定方法[此时是创建方法,方法没执行,当事件行为触发,浏览器会把绑定的函数执行,此时函数中的this->当前元素对象本身]

函数执行

正常的普通函数执行:看函数执行钱是否有"点",如有,"点"前面是谁this,没有"点",this是window[严格模式下是undefined]

匿名函数

  + 函数表达式,等同于普通函数或者事件绑定等机制
  + 自执行函数:一般是windows/undefined
  + 回调函数:一般是window/undefined,但是如果另外函数执行中,堆回调函数做了特殊处理,以自己处理的为主
  + 括号表达式:小括号中包含"多项",这样也只取最后一项,但是this受到影响(一般是window/undefined)
特殊:基于attachEvent实现事件绑定,方法执行,方法中的this是window
 console.log(this); 
  DOM0:xxx.onxxx = function(){}
  DOM2:
     xxx.addEventListener('xxx',function(){})
    xxx.attachEvent('onxxx',function(){})
    
 document.body.addEventListener('click',function(){

     console.log(this); //->body

 })


// 函数执行
// "use strict" // 开启严格模式(默认是非严格模式)
 function fn(){
     console.log(this);
 }

 let obj = {
     name"taiji",
     fn
     // fn: fn 
// }


// fn() // this->window/undefined
 obj.fn(); //this->obj
 (obj.fn)(); //this->obj
 
// 括号表达式

// (10,obj.fn)(); //this->window/undefined

// 函数表达式
 var fn = function(){
     console.log(this)
 }
 fn();


// 自执行函数
 (function(x){
     console.log(this);//->window/undefined
 })(10)


// 回调函数:把一个函数A作为实参,传递给另外一个执行的函数B[在B函数执行中,可以把A执行]

 function fn(callback){
     // callback ->匿名函数
     callback();
 }

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


 let arr = [10,20,30];

 arr.forEach(function(item,index) {

    console.log(this// this->window

 },{xxx:'xxxx'} ) 
 // 加了第二项后,this->forEach第二个参数的[对象] forEach内部处理了


 setTimeout(function(x){
     console.log(this,x)// this->window x->10
 },1000,10)

大厂面试题知多少

var x = 3,
    obj = {x5};
obj.fn = (function () {
    this.x *= ++x;
    return function (y) {
        this.x *= (++x)+y;
        console.log(x);
    }
})();
var fn = obj.fn;
obj.fn(6); // x->13
fn(4); // x->234
console.log(obj.x, x); // obj.x=95 x=234

分析一下上面那个题

图片.png

这块的意思是执行obj.fn相当于执行return后面的函数 注意

图片.png 前端路漫漫其修远兮,吾将上下而求索,一起加油,学习前端吧

欢迎留言讨论~