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,是包含它的函数作为方法被调用时所属的对象
var o = {
foo: 1,
bar: function(){
return this.foo
}
} o.bar()
// var a = o.bar
a()
// undefined
以上代码两种输出结果是由this的动态作用域导致的,第一次输出时里面的this是对象o,第二次输出时里面的this是对象window(全局对象)
当然可以使用bind方法绑定作用域:
var o = {
foo: 1,
bar: function(){
return this.foo
}
} o.bar()
// var a = o.bar
a()
// undefined var b = o.bar.bind(o)
b()
//
o.foo = 12
b()
//
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
方法的返回值是函数
// bind()最简单的用法是创建一个函数,使这个函数不论怎么调用都有同样的this值
// 常见的错误: 将方法从对象中拿出来赋值给变量然后调用,并希望this指向原来的对象 但是实际上此时this指向全局对象window
// 这样如果不做特殊处理,一般会丢失原来的对象
// 但是使用bind()方法能够很漂亮的解决这个问题: this.num = 9;
var module = {
num: 81,
getNum: function() { return this.num; }
}; module.getNum(); // var getNum = module.getNum;
getNum(); // 9, 因为在这个例子中,"this"指向全局对象 // 创建一个'this'绑定到module的函数
var boundGetNum = getNum.bind(module);
boundGetNum(); //
(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使用实例:
// apply 做了两件事情
// 1是绑定 this
// 2 是把数组参数解开传给函数
// console.log.apply(console, arguments)
// 调用 log 函数, this 是 cosnole
// arguments 是一个数组, 但是作为参数 传递给 log 函数 // call 和 apply 一模一样几乎
// 区别只在于传递参数的方式
console.log.apply(console, [1, 2, 3, 4])
console.log.call(console, 1, 2, 3, 4)
JavaScript中的坑的更多相关文章
- JavaScript中的坑--全局变量惹得祸
js中变量的作用域及闭包的概念 概述 身为一名程序员,因为bug周末加班是必不可少的事情,当解决bug的时候,总有些bug是因为规范导致的,但是这些bug往往不好找,也就是"前人挖坑,后 ...
- Javascript 中 的坑..
### 1. 0 == '' 返回 true 0 === '' 返回false......... 切记...
- 坑:JavaScript 中 操作符“==” 和“===” 的区别
标题:JavaScript 中 操作符"==" 和"===" 的区别 记录一些很坑的区别: 1. '' == '0' // false 0 == '' // t ...
- javascript中所谓的“坑”收录
坑一: // 反例myname = "global"; // 全局变量function func() { alert(myname); // "undefined&quo ...
- null的坑 和 比较运算符、相等运算符的隐式转换问题 (在javascript中,null>=0 为真,null<=0 为真,null==0却为假,null到底是什么?)
null在关系运算中的坑 & 关系运算符的隐式转换问题 注意: 比较运算符 和 相等运算符 的 ECMAscript 语法实现不同. 比较运算符 和 相等运算符 对数据进行了隐式转换, 相当于 ...
- JavaScript中的数据类型转换
本文中提到的“原始值”指的是undefined,null,Boolean,string和number. 本文中的对象是native对象,宿主对象(浏览器定义的对象)按照各自的算法转换. JavaScr ...
- 让你分分钟学会Javascript中的闭包
Javascript中的闭包 前面的话: 闭包,是 javascript 中重要的一个概念,对于初学者来讲,闭包是一个特别抽象的概念,特别是ECMA规范给的定义,如果没有实战经验,你很难从定义去理解它 ...
- 详解JavaScript中的this
JavaScript中的this总是让人迷惑,应该是js众所周知的坑之一. 个人也觉得js中的this不是一个好的设计,由于this晚绑定的特性,它可以是全局对象,当前对象,或者…有人甚至因为坑大而不 ...
- JavaScript中的this陷阱的最全收集 没有之一
当有人问起你JavaScript有什么特点的时候,你可能立马就想到了单线程.事件驱动.面向对象等一堆词语,但是如果真的让你解释一下这些概 念,可能真解释不清楚.有句话这么说:如果你不能向一个6岁小孩解 ...
随机推荐
- stm32 看门狗配置
1.独立看门狗: 1) 取消寄存器写保护(向 IWDG_KR 写入 0X5555) IWDG_WriteAccessCmd(IWDG_WriteAccess_Enable); //使能或者失能 2) ...
- 【BZOJ3295】【CQOI2011】动态逆序对
cdq分治经典例题,然而智商掉线傻逼错误坑了两天 原题: 对于序列A,它的逆序对数定义为满足i<j,且Ai>Aj的数对(i,j)的个数.给1到n的一个排列,按照某种顺序依次删除m个元素,你 ...
- Laravel 5.1 中 Session 数据存储、访问、删除及一次性Session实例教程
1.Session的由来及其实现 HTTP协议是无状态的协议,同一个客户端的这次请求和上次请求是没有对应关系的.也就是说我们无法在服务器端确认两次请求是否是同一个用户所为,这为我们在一些应用场景中实现 ...
- 脸部识别JavaScript类库Tracking.js
作者 王文刚 发布于 2014年8月10日 | 对Web开发者而言,开源的JavaScript库Tracking.js正在使计算机视觉和增强现实技术变得简单, 使用它可以展示效果类似Kinect或 ...
- PYTHON之MOCK WEB接口
在日常的测试工作中,有时会有需要调用外部接口,拿到返回数据用以满足当前的测试任务的需求.但是当外部接口不可用,或者没有提供测试用环境时,我们就需要自己来mock一个接口的返回内容了,先让我们看一看下面 ...
- TFTP error: 'Only absolute filenames allowed' (2)
hisilicon # tftp 0x82000000 u-boot-hi3518ev200.bin Hisilicon ETH net controler MAC: ----- eth0 : phy ...
- 让node支持es模块化(export、import)的方法
node版本v7.9.0,支持了大部分es6的功能,但还不支持es6模块化(export.import). 检测ES6 可以使用es-checker来检测当前Node.js对ES6的支持情况. 使用命 ...
- js object对象赋值bug和对象复制clone方法
最近在写程序的时候发现,如果新建一个object对象objb,初始化值为obja,如果改变了objb对象的字段值,那么obja也会随之改变,看来对象赋值传递的是一个引用. 代码重现: <scri ...
- 未能正确加载“VSTS for Database Professionals Sql Server Data-tier Application”包。(转)
今天费了九牛二虎之力,重转好了vs2010之后,打开解决方案,报出下面的错误: ---------------------------Microsoft Visual Studio---------- ...
- QString 和char数组转换(转)
在qt开发过程中经常遇到QString类和char数组进行转换,在此记录一下: QString->char数组 1 2 3 QString str="12fff"; QByt ...