上一篇讲了js的立即执行函数,现在做一点应用:
一、立即执行函数应用
var a = 10; //1
(function() {
console.log(a); //2
a = 5; //3
console.log(window.a); //4
var a = 20; //5
console.log(a);
})()
执行结果是:??
- 行标2处:输出结果 undefined;
通过定义一个匿名函数,创建了一个新的函数作用域,相当于创建了一个“私有”的命名空间,该命名空间的变量和方法,不会破坏污染全局的命名空间。
若是想访问全局对象,将全局对象以参数形式传进去即可
(function(a) {}(10)
为什么不是20? 这块由于变量提升的原因,立即执行函数的代码变成:
(function() {
var a=undefined;
console.log(a); //2
a = 5; //3
console.log(window.a); //4
a = 20; //5
console.log(a);
})()
- 行标4 处打印 :10
行标1处通过var全局声明a=10,如果全局的标量通过var 声明则会挂载到window上面
3) 行标6处 打印 :20;
二、 对象中
var obj = {
'2': 3,
'3': 4,
'length': 2,
'splice': Array.prototype.splice,
'push': Array.prototype.push
}
obj.push(1)
obj.push(2)
console.log(obj)
输出的结果是什么??
先了解一个概念:类数组
类数组: -不是数组
1.可以利用属性名模拟数组的特性,不具有数组所具有的方法
2.可以动态的增长length属性,拥有length属性,其它属性(索引)为非负整数(对象中的索引会被当做字符串来处理,这里你可以当做是个非负整数串来理解)
3.如果强行让类数组调用push方法,则会根据length属性值得位置进行属性的扩充。
将类数组转成数组:
const div = document.querySelectorAll('div')
Array.from(div)
[...div]
Array.prototype.slice.call(div,0)
push 方法
在数组末尾插入给定值,数组长度+1;
const arr = []
// 输出 0 []
console.log(arr.length, arr)
arr.push(1)
// 输出 1 [1]
console.log(arr.length, arr)
可以看到push方法会将数组的length + 1, 然后将值放在索引为length - 1的位置即arr[0] = 1;
在MDN上面对push的方法的解释是:
push 方法具有通用性。该方法和 call() 或 apply() 一起使用时,可应用在类似数组的对象上。push 方法根据 length 属性来决定从哪里开始插入给定的值。如果 length 不能被转成一个数值,则插入的元素索引为 0,包括 length 不存在时。当 length 不存在时,将会创建它。
再看obj.push(1), 因为obj.length = 2, 所以会将length + 1就变成了3, 这时候 索引值时obj[3 - 1] = 1 即obj[2] = 1, 同理 obj.push(2) 也一样的。
当console.log(obj)的时候,因为数组未设置索引为0,1的值,所以值时empty, 然后索引 2,3都有值。
nodejs与chrome控制台的不同
在nodejs中,上面的代码会输出:
{ '2': 1,
'3': 2,
length: 4,
splice: [Function: splice],
push: [Function: push] }
但 chrome中,输出
[empty × 2, 1, 2, splice: ƒ, push: ƒ]
可以看到一个是对象,一个是数组,这一块有一个隐藏的知识点,其实通过push为类数组添加数据并不会将类数组变成数组,所以nodejs输出的还是一个对象,但是对于chrome控制台,它会通过判断数据上面是否有length和splice属性来判断将数据展现为对象格式还是数组格式,可以控制台试试下面代码
console.log({splice:function(){},length:1})
console.log({slice:function(){},length:1})