JavaScript必知必会+理解总结

英文原文:Stack Overflow 编译:西城一隅

这是stackoverflow上的一个老问题,却有个干货答案,但是扩展的信息量很大,我只在此抛个砖。

Not jQuery. Not YUI. Not 等等…

js的框架的确很有用,但是它们却常常把一些js的丑陋细节和DOM原理给你隐藏了。如果你的目标是做一个精通javascript的工程师,那花大把的时间放在框架上可能恰恰背道而驰了。

下面就有javascript这门语言的一些特性,你应该知道并且深谙此道,但是很多人可能还并不清楚。

一、对象属性,object.prop和object[‘prop’]是一回事(所以你能停止使用eval了吗?!3KU);对象的属性多是String类型(有些也是数组Array)

for…in是什么情况下使用,什么情况慎用?

方括号可以通过变量来访问属性

当属性是带空格的string时就只能用方括号了:person[‘first name’];

for…in 循环输出的属性名顺序不可预测,使用之前先检测对象是否为null 或者 undefined

二、属性检测;undefined和null;为什么鲜为人知的in运算符非常有用,以及它和typeof、undefined的区别;hasOwnProperty;delete作用

undefined好理解一般用来表示未定义,而且不能用delete来删除它。

null 表示一个空对象指针 所以 typeof null返回 object

undefined派生自null alert(null == undefined) 返回true; 但alert(null === undefined)就返回false了

关于hasOwnProperty和Object:

hasOwnProperty是js中唯一一个处理属性但是不查找原型链的函数


var o =new Object();

Object的每个实例都具有下列属性方法:

1.Constructor:保存着用于创建当前对象的函数 上面例子 构造函数就是 Object()

2.hasOwnProperty(prop):检查给定的属性是否在当前对象实例中(而不是在实例的原型中)。作为参数的属性必须以string形式指定

3.isPrototypeOf(object):用于检查传入的对象是否是另一个对象的原型。

4.propertyIsEnumerable(propertyName):用于检查给定的属性是否能够使用for in语句

5.toLocaleString():返回对象的字符串表示,与环境的地区对应

6.toString():同上

7.valueOf(): 返回对象的字符串、number、Boolean表示。通常与toString()相同

三、Number类型就是浮点类型(64位浮点数);使用浮点数会遇到语言无关性的问题;避免使用parseInt时的八进制陷阱

ECMAScript5不具有解析八进制的能力,可在IE7和chrome上测试 parseInt(069);

ES3和ES5之间存在分歧

javascript中的乘法问题:

一般可以用 10000 作为基数

31.12 * 10000 * 9.7 / 10000

四、嵌套函数作用域;避免全局变量导致的意外而使用var的必要性;闭包的作用域如何结合使用;在循环与闭包的问题

作用域和var关键字的面试题


循环中使用闭包

之前写过的闭包的理解关于闭包

五、全局变量和window对象的属性产生冲突怎么办(它们其实是一回事);全局变量和DOM元素在IE中的冲突;在全局作用域中使用var来避免这些问题

六、 function语句在解析时会被提升(不管function被放置在哪里,它都会被移动到定义时所在作用域的顶层) 函数声明和函数表达式;为什么命名函数表达式不应该使用

关于函数声明提升

解析器会执行一个函数声明提升(function decalaration hoisting)的过程,读取并将函数声明添加到执行环境中。

对代码求值时js引擎在第一遍会声明函数并将它们放到源代码树的顶部。


关于命名函数表达式

1、命名函数表达式即被认为是函数声明也被认为是函数表达式

2、命名函数表达式还能创建两个不同的函数对象—-这是js的bug

竟然创建了两个对象,他们之间还不是引用的关系,是不是很有趣。。。我只能说:呵呵 interesting……

3、在条件语句中命名函数表达的声明式仍然会被解析

注:上面的3条准确的说应该是算是jScript的bug

七、构造函数;prototype属性;new运算符的运行机制;利用这些方法实现一个类-子类-实例的系统;在何时应该考虑使基于闭包的对象来替代原型设计

看看面向对象吧

八、this是在函数调用时才被确定的而不是定义的时候;把函数当做参数传入时不像其他语言那样执行;如何使用闭包或者Function.prototype.bind来解决这些问题呢

关于this的调用,直接上代码:

上面代码很简单 请自行补脑……

之前写过的关于this的理解

关于Function.prototype.bind(thisArg [, arg1 [, arg2, …]]):

这是ECMAScript 5中的方法看看Opera的对它的介绍吧

简单翻译就是:

Function.prototype.bind 返回一个新的函数对象,该对象的 this 绑定到了thisArg参数上。本质就是:这允许你在其他对象链中执行一个函数

但是很多浏览器不支持,通过一个js的hack看看原理吧:

九、其他的ES5新特性如indexOf  、 forEach 以及Array使用函数式编程;旧浏览器如何兼容这些新的方法;使用匿名函数调用这些方法来使代码更加紧致具有可读性


这些都是 ES5 中 Array 对象的扩展方法

PS:还是点此自行补脑,我也在研究中…..后续会再补充

十、浏览器和js代码之间控制流程的原理;同步和异步执行;事件在运行时触发和事件在控制返回时触发的区别;调用同步执行的方法如alert而引起控制流重新进入的潜在问题(翻译不通,请自行补脑)。

十一、跨window脚本对instanceof的影响 在不同的DOM中跨window脚本对控制流的影响;postMessage怎么解决这个问题

postMessage就是HTML5解决跨域问题引入的API,使得多个iframe/window实现跨域通信。

写了个postMessage跨域通信的demo: 点此查看

最重要的是,你需要批判的去看待javascript,承认因为种种历史原因而导致各种不完美(甚至比其他语言还要糟糕),并要避免各种陷阱。Crockford在这方面的研究很值得学习(虽然我不完全认同他的《javascript语言精粹》)

11 收藏 12 评论

相关文章

可能感兴趣的话题



直接登录
最新评论
  • lys   2013/05/14

    “undefined派生自null”
    对这句话并不认同, typeof undefined返回类型为undefined, typeof null返回类型为object。
    希望楼主给出这句话的出处。
    感谢

    • “undefined派生自null”
      这是《javascript该机程序设计(第三版)》 26页里看到的

  • 捕风   2013/05/14

    “ECMAScript5不具有解析八进制的能力,可在IE7和chrome上测试 parseInt(069);”,069中的9并不是合法的8进制数值,所以不会把069解析成8进制,我在chrome下面得到如下结果:
    parseInt(077) === 63, parseInt(078) === 78

  • 刘小狼   2013/05/16

    isPrototypeOf那个地方是不是说错了

  • bells   2013/05/20

    {}.hasOwnProperty.call(obj,’prop’); 这句代码在chrome console中,有错误??

    提示:SyntaxError: Unexpected token . 为啥?

  • 王瑞   2014/09/14

    四、嵌套函数作用域 functio关键字写错了

  • hankonline Web前端 2015/11/18

    命名函数表达式的两个例子在浏览器里结果都不对啊。
    1: typeof g; // “function” -> “undefined”
    2: 报错。Uncaught ReferenceError: g is not defined(…)

跳到底部
返回顶部