10段代码打通js学习的任督二脉

  前言

  为了Node.js做准备,js的基本功还是很重要的。所以正值1024程序员节的时候所以找了些题目,整理了一下知识点。

  简单回调

  代码

  function foo(){

  console.log(this.a);

  }

  function doFoo(fn){

  fn();

  }

  function doFoo2(o){

  o.foo();

  }

  var obj = {

  a: 2,

  foo: foo

  };

  var a = "I‘m an a";

  doFoo(obj.foo);

  doFoo2(obj);

  分析

  在JavaScript中,this指向函数 执行时的当前对象,而非声明环境有。

  执行doFoo的时候执行环境就是doFoo函数,执行环境为全局。

  执行doFoo2时是在对象内部调用函数,this指针指向该对象。

  结果

  I‘m an a

  2

  用apply改变函数作用域

  function foo(somthing){

  console.log(this.a, somthing);

  }

  function bind(fn, obj){

  return function(){

  return fn.apply(obj, arguments);

  }

  }

  var obj = {

  a:2

  }

  var bar = bind(foo, obj);

  var b = bar(3);

  console.log(b);

  分析

  apply、call、bind都有个作用就是改变作用域,这里用apply将foo函数的作用域指向obj对象,同时传入参数。

  再简单分析一下bind函数内部的嵌套,执行bind函数的时候返回的是一个匿名函数,所以执行bar(3)的时候实际上是执行的bind内部的匿名函数,返回的是之前传入的foo函数的执行结果。

  函数没有返回值的情况下默认返回undefined。

  结果

  2 3

  undefined

  new关键字

  function foo(a,b){

  this.val = a+b;

  }

  var bar = foo.bind(null, ‘p1‘);

  var baz = new bar(‘p2‘);

  console.log(baz.val);

  分析

  bind函数的第一个参数为null代表作用域不变,后面的不定参数将会和函数本身的参数按次序进行绑定,绑定之后执行函数只能从未绑定的参数开始传值。

  结果

  p1p2

  自执行函数

  function foo(){

  console.log(this.a);

  }

  var a = 2;

  var o = {a:3,foo:foo};

  var p = {a:4};

  (p.foo=o.foo)();

  分析

  经常可以看到这样的代码

  (function(){

  //...

  })()

  这种代码通常是创建一个立即执行的函数同时避免污染全局变量。

  很少有人去关注赋值语句执行之后会返回什么结果,其实就是返回当前值。也就是说当括号内执行完赋值之后,返回的是o对象中的foo函数。函数的执行环境中有一个a对象,嗯,就是它了~

  答案

  2

  变量属性

  var a = [];

  a[0] = 1;

  a[‘foobar‘] = 2;

  console.log(a.length);

  console.log(a.foobar);

  分析

  当一个变量被声明后,扩充其属性并不会改变塬数据类型。

  结果

  1

  2

  精度问题

  var a = ‘foo‘;

  a[1] = ‘O‘;

  console.log(0.1+0.2==0.3||a);

  分析

  当操作小数时请小心,js的小数计算并不精确,所以上面的判断是false。

  字符串变量是常量。

  结果

  foo

  命名提升

  foo();

  var foo = 0;

  function foo(){

  console.log(1);

  }

  foo = function(){

  console.log(2);

  };

  分析

  声明的变量和命名函数都会被提升到代码的最前面,只不过声明的变量的赋值语句在代码中的位置不变。所以上面这段代码应该被理解为:

  var foo;

  function foo(){

  console.log(1);

  }

  foo();

  foo = 0;

  foo = function(){

  console.log(2);

  };

  结果

  1

  思考

  foo();

  var foo = 0;

  function foo(){

  console.log(1);

  }

  foo();

  foo = function(){

  console.log(2);

  };

  foo();

  上面代码的结果:

  1

  报错

  作用域

  foo();

  var a = true;

  if(a){

  function foo(){

  console.log(‘a‘);

  }

  } else {

  function foo(){

  console.log(‘b‘);

  }

  }

  分析

  javascript并不是以代码段为作用域,而是以函数。

  再根据命名提升的塬则,所以这段代码应该是这样的:

  function foo(){

  console.log(‘a‘);

  }

  function foo(){

  console.log(‘b‘);

  }

  foo();

  var a = true;

  if(a){

  } else {

  }

  结果

  b

  闭包陷阱

  for(var i=1;i<=5;i++){

  setTimeout(function(){

  console.log(i);

  }, i*1000);

  }

  分析

  闭包有个重要的作用就是,在内层函数引用外层函数定义的变量时,外层函数的变量不会被会被持久化。

  这里有个隐藏陷阱就是for循环结束之后i仍然自增了1。

  结果

  6

  6

  6

  6

  6

  伪闭包

  function foo(){

  console.log(a);

  }

  function bar () {

  var a = 3;

  foo();

  }

  var a = 2;

  bar();

  分析

  闭包是函数的嵌套定义,而不是函数的嵌套调用。

  结果

  2

  思考

  如何输出3?

  function bar () {

  function foo(){

  console.log(a);

  }

  var a = 3;

  foo();

  }

  var a = 2;

  bar();

时间: 2024-10-31 02:10:14

10段代码打通js学习的任督二脉的相关文章

案例干货|用友罗涛:打通产品开发的任督二脉

[精彩预告]用友集团开发管理部总经理罗涛将于5月21日在上海MPD工作坊进行<破解4小时上线传说>的3小时分享.通过一个故事引入互联网+产品开发的迭代思路.价值发掘和发布规划等核心思想和工具,将结组利用小图团队的力量使用影响地图.用户故事地图.无代码验证等演练手段在3个小时的工作坊内快速发布一个产品,带领学员在操作中理解精益和敏捷.文章来源:公众号 :msup(ID:msupclub)关注回复“体验工坊”有惊喜. 导读:在面对需求的变化无常.人员的变动和技术的更新时,对客户价值的识别尤其重要,

开篇词 | 打通“容器技术”的任督二脉

Kubernetes 项目已然成为容器技术的事实标准,重新定义了基础设施领域对应用编排与管理的种种可能. 这些关于 Linux 内核.分布式系统.网络.存储等方方面面的积累,并不会在 Docker 或者 Kubernetes 的文档中交代清楚.可偏偏就是它们,才是真正掌握容器技术体系的精髓所在,是每一位技术从业者需要悉心修炼的“内功”. 我觉得更好一点的顺序为:1. PaaS 概念已经深入人心的完美契机.(天时)2. Docker 镜像通过技术手段解决了 PaaS 的根本性问题:(地利 自我创新

天河微信小程序入门《三》:打通任督二脉,前后台互通

原文链接:http://www.wxapp-union.com/forum.php?mod=viewthread&tid=505&extra=page%3D1 天河君在申请到https证书后就第一时间去部署后台环境,但是发现每次访问https都要带上8443端口实在是很坑爹啊,作为一个强迫症晚期,我要做的自然是不带端口直接访问.打开你tomcat下的conf文件夹,编辑里面的server.xml <Connector port="80" protocol=&quo

打通任督二脉---原来这就是计算机(持续更新)

笔者是一个计算机爱好者,还记得当初还是个刚上小学的孩子,那时,我第一次听说世界上还有计算机这种东西(那时都叫电脑),当时是90年代,估计那时全村也没有一个人见过电脑,所以电脑就被传的神乎其神:有了电脑,任何犯人都逃不过警察的追捕,因为电脑能算出来犯人在哪里,电脑能一瞬间算出当时觉得比登天还难的5位数的加减乘除,电视里的天气预报也是电脑算的,什么火箭,卫星,原子弹,氢弹都是电脑算出来的......  能想象出我当时对电脑崇拜的心情吗,当时,在我的眼里,电脑不是机器,而是像神一样的虚幻的存在,甚至都

打通电商多模式支持的“任督二脉”

你听说过任督二脉吗?像这样~ 咳咳~今天不讲武功,讲电商平台设计的功夫~ 背景 当今的电商可不仅仅是B2C商城,接下来还会有O2O,往后可能还会有商超.奥莱.二手交易...且称之为业务模式~而每个业务模式下还会有预售.竞拍.拼团等不同组合的子模式. 可是我商城的商品列表页不想展示O2O的商品啊,商品列表的数据希望按一定规则相互隔离.其他模块,有的出于操作习惯的考虑不隔离,有的出于用户行为的考虑需要隔离. 各模块数据隔离需求如下   列表页 商详页 商品组 优惠券 活动 订单 ... 原商城 隔离

K2 BPM_当K2遇上医药,用流程打通企业的任督二脉_业务流程管理系统

据调查,如今仍有60%的医药企业,存在合规经营和利润下降的困扰,在“研”.“产”.“供”.“销”的运营过程中,时时伴随着严苛的管理政策和法规.如何加强企业跨部门.跨组织.跨业务线的执行能力,始终是管理层最关注的话题.而流程,则是打通“任督二脉”,提高执行力的最佳解决办法. 当K2遇上医药 K2在医药行业的核心应用 -医疗推广活动管理 -讲者管理 (含讲者资质审核/讲者在线付款流程) -全面费用管理 -经销商管理 -特价及返利管理 -医疗问询及不良反应记录追踪 -招投标管理 -注册证管理 -销售&

任督二脉

RMI:https://www.cnblogs.com/xt0810/p/3640167.html 因为真要有技术深度的话,你可能需要花费至少2年的时间,从底层开始研究一些基础性的技术. 在打通你的底层技术任督二脉之后,再去对常见的开源技术进行深入的源码研究,比如说:dubbo.zookeeper.spring cloud.redis.rocketmq.elasticsearch,等等. 有了几年的积累过后,最后你在面试的时候,技术深度的体现,其实都是厚积薄发的. 原文地址:https://ww

一个只有99行代码的JS流程框架(二)

张镇圳,腾讯Web前端高级工程师,对内部系统前端建设有多年经验,喜欢钻研捣鼓各种前端组件和框架. 导语 前面写了一篇文章,叫<一个只有99行代码的JS流程框架>,虽然该框架基本已经能实现一个流程正常的逻辑流转,但是在分模块应用下还是缺少一定的能力,无法将一个页面中的不同模块很好的连接在一起,于是对之前的框架进行了升级,新增了子流程的概念. 子流程 什么是子流程?在这个升级后的框架里(当然代码已经不止99行了,不要在乎标题),每个步骤不但可以是一个function,还可以引用另一个流程,这个被引

Appium+python自动化(十一)- 元素定位秘籍助你打通任督二脉 - 下卷(超详解)

简介 宏哥看你骨骼惊奇,印堂发亮,必是练武之奇才! 按照上一篇的节目预告,这一篇还是继续由宏哥给小伙伴们分享元素定位,是不是按照上一篇的秘籍修炼,是不是感觉到头顶盖好像被掀开,内气从头上冒出去,顿时觉得整个身体都融化了,而且身轻如燕啊!而且控制不住手,想要动手操作一番呢?那还在等什么呢,和宏哥一起练起来吧!!! 1. List定位 List故名思义就是一个列表,在python里面也有list这一个说法,如果你不是很理解什么是list,这里暂且理解为一个数组或者说一个集合.首先一个list是一个集