闹心的变量

分享

前言

JS 的本质?复读机?忍者!

“躺好吧!”js 老大拿起一旁的咖啡,对函数说道。

“好!”

js 老大按下工作台旁的按钮,函数眼中射出两道光芒,投在了工作台前的白幕。工作台一旁,出现了一个小盆,里面空空如也。

“来吧,开始执行!”老大狠狠的抿了一口手中的咖啡,按下了工作台侧边的按钮。

嘿!你好

工作台上方的白幕上出现了函数保存的第一行代码:

let num1 = 1;

老大大手一挥,造了个新数据:1,分配到了变量大厅的 0x007 号单间,于此同时工作台旁的小盆内出现了一个身影,头上标着 num1,身上写着 0x007

“嘿!小不点,你好呀!”老大对刚出现的身影挥了挥手。

“你才是小不点!” num1 挥了挥那只小手,呛了老大一句。

老大嘿嘿一笑,摇了摇头。“不管你了,继续执行!”说着,再次按了下按钮。

白幕上出现了第二行代码:

let num2 = 2;

“又是一个赋值操作啊!简单!” 大手一挥,小盆内又蹦出一个身影,头上标着 num2,身上写着 0x008

“嘿!你好呀!” num2 看到 num1 出现后便脱口而出:“天王盖地虎!”

“小鸡炖蘑菇!” num1 相视一笑。把 num2 拉到了身边。

“继续!”老大并没有管小盆内的 num1num2

融和

let num3 = num1 + num2;

“终于开始有点难度了,num1 num2 过来,干活了。”老大朝着小盆说道。

“好嘞,有何吩咐!”。

“过来吧,让我看看你们的类型,都是数字,OK。” 老大说着,从工作台上拿起累加器,把 num1num2 丢了进去。不一会,累加器给了老大一个结果:3。老大大手一挥,小盆里又蹦出一个身影,头上标着 num3

“快去见见你们的新伙伴吧!” 老大朝着 num1num2 说道。

“天王盖地虎!” num1num2 对新来的小伙伴说道。

“小鸡炖蘑菇!”

“嘿嘿,是我们的人!”

争议

let prefix = "question";

“赋值操作,简单。” 老大刚说完,小盆中又蹦出一个身影,头上标着 prefix

“喂喂,那个新来的,天王盖地虎!” num1prefix 喊道。

“宝塔镇河妖????” prefix 满脸的疑问。

“你别过来!非我族人,哪儿凉快哪儿呆着去!” num1 拉了拉旁边的 num2num3

prefix 还在蒙圈中,下一句代码随之而来:

let question = prefix + num1;

“嘿,prefixnum1 过来,配合一下,求个值!”老大说道。

“什么!我要和它一起?还求值!非我族类,弄不了!” num1 恶狠狠的说道:“求值是不可能求值的!这辈子都不会和它一起求值的!抛错吧!”

“...” prefix 一脸委屈,继而转为愤怒:“你以为你谁啊!谁愿意与你一起,个渣渣!”

“行了!谁让你们一起的,看把你们能的!” 说着老大拿出一旁的类型转换器,自言自语道:“我记得有个偏向性啥的,+号偏向性是什么来着,让我看一言说明书:JavaScript 类型转换

+号 两侧的类型中有字符类型,则其偏向性为字符串。

“现在两边是有字符类型,那么整体的偏向性应该为字符,那就要把数字转换成字符串!得嘞,num1 你过来,我给你转转!”

说着,老大拿出 String 转换器,放入 num1String(num1))一顿操作后,蹦出个字符串:"1"

“回去吧!接下来就没你的事了!”老大对着 num1 说道。

“接下来就好办了,字符串拼接。” 说着,老大拿出字符串拼接器,放入了 prefix 与刚生成的 "1"。不一会生成了 question

“过来!过来!那边那些变量可不咋地!” prefixquestion 说道。

“我刚刚都瞧见了!个渣渣!” 说着 question 走向了 prefix

“对,同类的感觉是一样的。” prefix 兴奋的说道。

各自为营

let null1 = null, null2 = null;

转眼间,小盒内又出现了两个身影。

“个渣渣?” prefix 对着 null1null2 说道。

“?? 你才渣渣!” null1 有点恼怒。

“哦!不好意思,认错人了!我就对对暗号,不好意思哈!” prefix 略带抱歉的说道。

“天王盖地虎?” prefix 刚说完,num1 紧接着问道。

“宝塔镇河妖?” null1 有点不知所措。

“你别过来!非我族人,哪儿凉快哪儿呆着去!” num1 脱口而出。

null1 终于怒了,大喊道:“水能载舟!”

“也能煮粥!” 一旁的 null2 脱口而出。

“走我们去那边!一个个的了不起啊!谁还没个暗号!”

看着小盆里快要闹翻了天,老大终于忍不住了:“你们一个个的干嘛呢!要反了不成!”

“非我族类,其心必异!” 变量们突然统一了口径。

“呦呵,这倒挺齐!”

“谁和它们齐了!” 虽然这么说着,但这句依旧齐的不像话。

“停停停!这个给你们,这个盆被我分成了七间,数值字符nullundefined布尔值引用值Symbol各一间,行了吧!”

“行!”

“你们还学!”

“还学!”

“哼!”

“哎~”老大拍了拍毛发日渐稀疏的脑袋,“真是些冤家!”

引用值

let obj = {
    toString() {
        return "this is a string";
    },
    valueOf() {
        return 1;
    }
};

随着代码的执行,引用值的单间也终于入住了一个变量:obj

let sum = num1 + obj;

num1 你过来,obj 你也过来。这是个求和操作!”

“偏向性如何?” obj 来了一句。

“你!知道偏向性?”老大一惊。

“对啊,我可是对象,什么都知道,说吧说吧!我还想着装饰下我的房间呢!快点。”

emmmm 说明书上说如果有字符的话是字符,没的话是数值!” 老大看着类型转换说明念了出来。“应该是数值,这里并没有字符。”

“了解了,反正偏向性不能确定是字符,对吧?” obj 问道。

“嗯,是的,这个 +号 运算的偏向性不确定。”

“好,那我调用我的 valueOf 方法吧,是个数值,给你!现在能确定偏向性了吧!”

“嗯,是数值!”

“那接下来该怎么做,你自己应该清楚了吧,我先走了!” 说完,剩下目瞪口呆的老大,拿着 obj 给的数值:1。生成了 sum 变量,其值为 2

“这个引用值有点厉害,省心!”

质疑

let mergeStr = question + obj;

“嘿,obj 这次偏向性是字符串没差了!”老大得意的说道。

“哦?+号 操作符的偏向性我记得是不确定的吧?”

“是啊,但这里已经有个字符了呀,偏向性不就能确定了吗?”

“那我可不管,我只管操作符的偏向性,只要是不确定,我就调用 valueOf 的结果给你,要是这个结果不是个基础类型,我在想想办法!”

“哈?你确定?”

“你到底是不是个称职的JavaScript 解释器啊!按我说的。”

“哦···” 突然的质疑让老大略感惭愧。

“这个给你。” obj 拿着数值:1 给了老大。“接着你再判断 +号 运算符的偏向性吧,我走了。”

“好,你慢走。” 老大突然有点泄气。但手上的活却依旧干着,不一会 mergeStr 变量出现在了小盒中。

顺畅

let mergeStr2 = `${question}${obj}`;

“这次偏向性确定了,就是字符串,给我字符串吧!” 老大自信的对 obj 说道。

“好,既然偏向性确定是字符串了,那就调我的 toString 吧!这个给你!”说着 obj"this is a string" 塞到了老大手中。

老大想了想,问道:“你会不会可能给我非字符类型的啊?”

“emmmm 这个有可能!但我给到你的肯定是基础类型,你在看情况转换呗!就是这样,我撤啦!”

“得嘞,又是个大爷!”

尾声

老大勤勤恳恳的继续往下执行代码,小盒内的变量进进出出,终于到了收尾的时候。

放下手中的工具,不经叹道:“这函数是谁写的啊,这么不严谨,那有对象和基础类型进行操作的,这么多不同类型间的相互操作,怎么一点质量都没有呢!”

阅读更多

JavaScript 对象 & 原型

前言 这次的 why what or how 主题:JavaScript 对象 & 原型。 此类文章在百度上一搜一大把,其实不用再写了,但是本着把这个问题解释的清清楚楚明明白白,还是开始写了。 原因如下: 1. 面试宝典类文章,弄张图片一糊弄,让人觉得自己理解了。 2. 解释类文章,告诉你一堆语法,对语法一顿解释,告诉你就是这样的,还是没说清楚。 3. 很少有文章单独解释这个点!但这个点是基础!真的很重要! 所以本篇文章想说一说对象 & 原型,但为了确保能顺利理解,请先看完 JS 变量存储?栈 & 堆?NONONO!,因为该篇文章从变量存储的角度来解释 JavaScript 对象 & 原型,请确保看完,在看这篇文章。 什么是对象? 既然要说清楚,

By Breeze

浏览器下的 Event Loop

前言 javascript 是以单线程的形式运行在宿主环境下,javascript 采用了回调的形式来解决异步任务。 为什么是单线程? javascript 的最开始的出现是为了给 web 页面增添一些动态的效果,那么就避免不了获取页面上的元素信息,如果 javascript 是以多线程的形式运行在浏览器内,如果两个线程内的 javascript 同时去获取/修改,某个页面上的元素,那么浏览器该让哪个 javascript 线程拥有获取/修改该元素的权限呢?由于元素的信息会经常性的发生变化,那么又改如何去同步各个线程内所保存的元素信息呢? 所以综合以上问题, javascript 是单线程的原因就显示意见了,单线程在执行时,对于元素信息的引用在同一时间仅可能只有一个,那么以上所有的问题都不存在了。 什么是异步任务? 任何代码在执行时,都会碰到一些需要经过大量时间运算或是等待的代码,在浏览器的环境下,常见的就是 http 任务,比如:资源的加载(图片的 onload 事件),ajax 的请求(XMLHttpRequest 的 onLoad 事件)还有页面元素的点击事件以及

By Breeze

node 下的 Event Loop

前言 通过 浏览器下的 Event Loop ,可以得知 javascript 是一门事件驱动的语言, javascript 主线程通过不断的调用事件队列中的事件来完成异步任务。那么 Node 下是否也是如此? Node 下的事件队列 在 Node 官网有这样一篇文章:The Node.js Event Loop, Timers, and process.nextTick() 。 该文章主要讲述了 Node 中是如何处理以及实现 Node 下的 Event Loop。 主要包含以下内容: 事件队列 不同于浏览器,Node 下的有 6 个事件处理阶段,其执行顺序和队列名称如下: ┌───────────────────────────┐ ┌─>│ timers │ │ └─────────────┬─────────────┘ │ ┌─────────────┴─────────────┐ │ │ pending callbacks │ │ └─────────────┬─────────────┘ │

By Breeze

什么是 HTML 5?

前言 作为程序员,技术的落实与巩固是必要的,因此想到写个系列,名为 why what or how 每篇文章试图解释清楚一个问题。 这次的 why what or how 主题:现在几乎所有人都知道了 HTML5 ,那么 H5 到底相比于 HTML4 有什么区别呢? 升级版?标准版! HTML5 做为 HTML 标准的第 5 版,于 2014 年发布,相信关注过 HTML5 的发展史的朋友都知道该版本是 WHATWG 和 W3C 握手言和后诞生的,是 W3C 组织与浏览器厂商相互妥协的结果,其中的绝大部分规范都由 WHATWG 组织所制定,之后由 W3C 采纳并入标准中。

By Breeze