JavaScript中的坑

内容：关于JavaScript中的一些蛋疼的问题以及面试笔试中常见的一些坑爹套路总结

此部份内容持续总结完善中、、、

 

 

 

1.undefined和null的区别

• null： Null类型，表明空值，表明一个空对象指针，使用typeof运算获得object，因此能够认为它是一个特殊的对象值
• undefined： Undefined类型，当一个声明了一个变量未初始化时，获得的就是undefined，可是typeof一个未声明的变量获得的也是undefined

 

  null和undefined的不一样之处:

• null是javascript的关键字，能够认为是对象类型，它是一个空对象指针，和其它语言同样都是表明空值
• undefined是javascript独有的，是一个预约义的全局变量，没有返回值的函数返回为undefined，没有实参的形参也是undefined
• undefined是访问一个未初始化的变量时返回的值而null是访问一个还没有存在的对象时返回的值。所以可把undefined看做是空的变量而null看做是空的对象
• 在定义一个想保存对象的变量时，就可让该变量先保存null值，这样既能体现null是一个空指针对象，也能更好的区分null和undefined
• 在声明一个变量时应该尽可能去赋值，这样确保typeof一个变量名为undefined的状况下这个变量是未声明的

 

 

2.坑爹的this

JavaScript中的this，是包含它的函数做为方法被调用时所属的对象

 1 var o = {
 2     foo: 1,
 3     bar: function(){
 4         return this.foo
 5     }
 6 }
 7 
 8 o.bar()
 9 // 1
10 
11 var a = o.bar
12 a()
13 // undefined

以上代码两种输出结果是由this的动态做用域致使的，第一次输出时里面的this是对象o，第二次输出时里面的this是对象window(全局对象)

固然可使用bind方法绑定做用域：

 1 var o = {
 2     foo: 1,
 3     bar: function(){
 4         return this.foo
 5     }
 6 }
 7 
 8 o.bar()
 9 // 1
10 
11 var a = o.bar
12 a()
13 // undefined
14 
15 var b = o.bar.bind(o)
16 b()
17 // 1
18 o.foo = 12
19 b()
20 // 12

 

 

3.bind apply call

(1)介绍

在JavaScript中，call、apply和bind是Function对象自带的三个方法，这三个方法的主要做用是改变函数中的this指向

bind apply call方法的共同点和区别：

• bind apply call三者都是用来改变函数的this对象的指向的
• bind apply call三者第一个参数都是this要指向的对象，也就是想指定的上下文
• bind apply call三者均可以利用后续参数传参
• bind 是返回对应函数，便于稍后调用；apply 、call 则是当即调用 

 

(2)bind

bind方法会建立一个新函数，称为绑定函数，当调用这个绑定函数时，绑定函数会以建立它时传入 bind方法的第一个参数做为 this，传入 bind方法的第二个以及之后的参数加上绑定函数运行时自己的参数按照顺序做为原函数的参数来调用原函数

注意：bind方法的返回值是函数

 1 // bind()最简单的用法是建立一个函数，使这个函数不论怎么调用都有一样的this值
 2 // 常见的错误: 将方法从对象中拿出来赋值给变量而后调用，并但愿this指向原来的对象 可是实际上此时this指向全局对象window
 3 // 这样若是不作特殊处理，通常会丢失原来的对象
 4 // 可是使用bind()方法可以很漂亮的解决这个问题：
 5 
 6 this.num = 9; 
 7 var module = {
 8   num: 81,
 9   getNum: function() { return this.num; }
10 };
11  
12 module.getNum(); // 81
13  
14 var getNum = module.getNum;
15 getNum(); // 9, 由于在这个例子中，"this"指向全局对象
16  
17 // 建立一个'this'绑定到module的函数
18 var boundGetNum = getNum.bind(module);
19 boundGetNum(); // 81

 

 

(3)apply和call

apply方法：

语法：apply([thisObj[,argArray]])

定义：应用某一对象的一个方法，用另外一个对象替换当前对象，注意apply方法第二个参数必须是数组或arguments对象

 

call方法：

语法：call([thisObj[,arg1[, arg2[, [,.argN]]]]])

定义：调用一个对象的一个方法，以另外一个对象替换当前对象。

说明： call 方法能够用来代替另外一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象

 

call 和 apply的区别：
对于 apply、call 两者而言，做用彻底同样，只是接受参数的方式不太同样。call 须要把参数按顺序传递进去，而 apply 则是把参数放在数组里。

既然二者功能同样，那该用哪一个呢？在JavaScript 中，某个函数的参数数量是不固定的，所以要说适用条件的话，当你的参数是明确知道数量时用 call ；而不肯定的时候用 apply，而后把参数 push 进数组传递进去。当参数数量不肯定时，函数内部也能够经过 arguments 这个数组来遍历全部的参数

 

call和apply使用实例：

 1 // apply 作了两件事情
 2 // 1是绑定 this
 3 // 2 是把数组参数解开传给函数
 4 // console.log.apply(console, arguments)
 5 // 调用 log 函数, this 是 cosnole
 6 // arguments 是一个数组, 可是做为参数 传递给 log 函数
 7 
 8 // call 和 apply 如出一辙几乎
 9 // 区别只在于传递参数的方式
10 console.log.apply(console, [1, 2, 3, 4])
11 console.log.call(console, 1, 2, 3, 4)