资讯专栏INFORMATION COLUMN

前端基础知识总结

MageekChiu / 345人阅读

摘要:关于前端中是个老生常谈的问题,总是说不清道不明,看这里。的大致用法,相信接触过前端的同学都知道,无非以下种。先想一下,两次执行后结果是什么。输出总结被谁调用指向谁,没有被调用的情况下,浏览器默认为。由于箭头函数中的,总是指向父级作用域。

关于this

前端中this是个老生常谈的问题,总是说不清道不明,看这里。
this只能用在函数里面,相信全世界的人都知道。
this就是函数在被执行的时候,产生的执行上下文(context)。
this的大致用法,相信接触过前端的同学都知道,无非以下5种。

1、 function test(){
       console.log(this);
    }
    test(); //不是对象的属性,直接执行
    
2、 var object = {
       test: test() {
          console.log(this);
       }
    }
    object.test(); //作为对象的属性被调用
    
3、 test.call(object); // apply用法差不多

4、 Function test() {
       this.name = test;
   }

5、箭头函数中的this

其中第4种构造函数没什么可说的,构造出了谁,谁就是this。
平常用的最多的也就是前3种,先说第3种情况。最后说第5种。

第3种情况被执行的时候,
object就是作为函数参数被传入到test()中,这个函数参数就是this
也就是说在test()被执行的时候,this就是指向object

第1种,第2种情况就是第3种情况的语法糖。

test.call(undefined);
object.test.call(object); //被谁调用指向谁
如果你传的 context 不是一个对象,那么在浏览器中默认是 window 对象。

分析下面的例子:

var name = "hut";
var obj = {
  name : "lucy",
  foo : function() {
     console.log(this.name);
  }
}
obj.foo(); 

var otherObj = {
  name : "john",
  foo : obj.foo
}

obj.foo(); 
otherObj.foo();

那么obj.foo(); otherObj.foo(); 就是我们上面所说的第2种情况。

先想一下,两次执行后结果是什么。

obj.foo() 其实就是:obj.foo.bind(obj),
也就是说函数在被执行的时候,是被obj调用的,那么函数内的this就是obj

function() {
   console.log(this.name); // 输出lucy
}

执行上下文(context)中的this是指向obj

otherObj.foo() 其实就是obj.foo.bind(otherObj)
也就是说函数在被执行的时候,是被otherObj调用的,那么函数内的this就是otherObj

function() {
   console.log(this.name);  // 输出john
}

再来看一个例子:

var name = "Bob";
var obj = {
  name = "lucy",
  foo : function() {
     console.log(this.name);
  }
}
obj.foo(); 

var otherObj = {
  name :"john",
  foo : function() {
     var testFunc = obj.foo();
     testFunc();
  }
}

otherObj.foo();

分析:
执行otherObj.foo(); 后,接着执行obj.foo();,也就是说执行下面的函数。
那么这个函数是被谁调用的呢,谁也没有调用这个函数obj.foo()前面谁也没有。
也就是obj.foo.bind(undefined);

function() {
   console.log(this.name);  // 输出Bob
}

最后看一个例子:

var name = "Bot";
var obj = {
  name : "lucy",
  showName: function() {
     console.log(this.name)
  },
  foo : function() {
     (function(callback) {
       callback();
     })(this.showName)
  }
}
obj.foo(); 

分析:
执行obj.foo(); 后,this.showName中的this就是obj,
也就是将obj.showName;传给cb,由于是立即执行函数,
则执行callback();也就是执行下面的函数
那么这个函数是被谁调用的呢,谁也没有调用这个函数callback前面谁也没有。
也就是obj.showName.bind(undefined);,输出Bob。

function() {
   console.log(this.name);  // 输出Bob
}

总结:
this被谁调用指向谁,没有被调用的情况下,浏览器默认为window。

特殊情况:
setTimeout,setInterval,匿名函数执行的时候,
函数体内的this为全局对象window。

最后说第5种,箭头函数中的this。

箭头函数内部并没有实现绑定this的机制,其实箭头函数并没有自己的this,
箭头函数内部的this总是指向父级作用域。

什么意思呢,看个例子。

    var name = "Bob";
    var obj = {
        name : "a",
        showName: () => {
            console.log(this.name);
        }
    }
    obj.showName(); // Bob

分析:
obj.showName()是在全局作用域下被调用的,然后执行下面的函数。

() => {
         console.log(this.name);
      }

由于箭头函数中的this,总是指向父级作用域
obj.showName()是在全局作用域下被调用的,不是obj,obj啥也不是。
所以输出Bob。

call、apply和bind的区别
function add(a,b,c) {
  console.log(this);
  return a+b+c;
}

以上3个方法都是函数的方法,call和apply都可以改变函数this,传递的参数方式不同。
call一个一个传递,add.call(obj, 1,2,3);
apply以数组的方式传递,add.apply(obj, [1,2,3]);,更方便。

bind也可以改变函数内部的this,它还可以传递固定参数,
var fix = add.bind(null, 100);
函数bind后,与call,apply方法的另一个区别是,
bind便不立即执行,而apply,call会立即执行,
add.apply(obj, [1,2,3]); 会立即执行得到结果6,
但是函数bind后,var fix = add.bind(null, 100);便不会立即执行,
fix(2,3),调用后才会执行,得到结果105,
var fix = add.bind(null, 100);绑定了第一个参数为100,
相当与固定了第一个参数的值为100,fix函数被调用后,则只需要传入之后的参数即可。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/95822.html

相关文章

  • 前端开发-从入门到Offer - 收藏集 - 掘金

    摘要:一些知识点有哪些方法方法前端从入门菜鸟到实践老司机所需要的资料与指南合集前端掘金前端从入门菜鸟到实践老司机所需要的资料与指南合集归属于笔者的前端入门与最佳实践。 工欲善其事必先利其器-前端实习简历篇 - 掘金 有幸认识很多在大厂工作的学长,在春招正式开始前为我提供很多内部推荐的机会,非常感谢他们对我的帮助。现在就要去北京了,对第一份正式的实习工作也充满期待,也希望把自己遇到的一些问题和...

    sf_wangchong 评论0 收藏0
  • 腾讯前端求职直播课——面试篇

    摘要:主讲人石小勇腾讯高级前端工程师,核心成员之一,现主要负责腾讯兴趣部落的研发设计工作闲聊前端从移动时代开始,前后端分离之后,前端这个岗位才开始慢慢火起来一线城市前端需求量大,但合格前端很少大话面试面试如相亲,为什么这么说五大要素颜王面试的第一 主讲人:AlloyTeam@石小勇(腾讯高级前端工程师,AlloyTeam核心成员之一,现主要负责腾讯QQ兴趣部落的研发设计工作) 1.闲聊前端 ...

    YFan 评论0 收藏0
  • 腾讯前端求职直播课——面试篇

    摘要:主讲人石小勇腾讯高级前端工程师,核心成员之一,现主要负责腾讯兴趣部落的研发设计工作闲聊前端从移动时代开始,前后端分离之后,前端这个岗位才开始慢慢火起来一线城市前端需求量大,但合格前端很少大话面试面试如相亲,为什么这么说五大要素颜王面试的第一 主讲人:AlloyTeam@石小勇(腾讯高级前端工程师,AlloyTeam核心成员之一,现主要负责腾讯QQ兴趣部落的研发设计工作) 1.闲聊前端 ...

    gxyz 评论0 收藏0
  • 腾讯前端求职直播课——面试篇

    摘要:主讲人石小勇腾讯高级前端工程师,核心成员之一,现主要负责腾讯兴趣部落的研发设计工作闲聊前端从移动时代开始,前后端分离之后,前端这个岗位才开始慢慢火起来一线城市前端需求量大,但合格前端很少大话面试面试如相亲,为什么这么说五大要素颜王面试的第一 主讲人:AlloyTeam@石小勇(腾讯高级前端工程师,AlloyTeam核心成员之一,现主要负责腾讯QQ兴趣部落的研发设计工作) 1.闲聊前端 ...

    miya 评论0 收藏0
  • 前端最强面经汇总

    摘要:获取的对象范围方法获取的是最终应用在元素上的所有属性对象即使没有代码,也会把默认的祖宗八代都显示出来而只能获取元素属性中的样式。因此对于一个光秃秃的元素,方法返回对象中属性值如果有就是据我测试不同环境结果可能有差异而就是。 花了很长时间整理的前端面试资源,喜欢请大家不要吝啬star~ 别只收藏,点个赞,点个star再走哈~ 持续更新中……,可以关注下github 项目地址 https:...

    wangjuntytl 评论0 收藏0
  • 个人分享--web前端学习资源分享

    摘要:前言月份开始出没社区,现在差不多月了,按照工作的说法,就是差不多过了三个月的试用期,准备转正了一般来说,差不多到了转正的时候,会进行总结或者分享会议那么今天我就把看过的一些学习资源主要是博客,博文推荐分享给大家。 1.前言 6月份开始出没社区,现在差不多9月了,按照工作的说法,就是差不多过了三个月的试用期,准备转正了!一般来说,差不多到了转正的时候,会进行总结或者分享会议!那么今天我就...

    sherlock221 评论0 收藏0

发表评论

0条评论

MageekChiu

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<