10 09/2014

javascript tutorial notes 1

最后更新: Wed Sep 10 2014 12:37:50 GMT+0800

The JavaScript Tutorial 学习笔记,不分先后

浏览器引擎

  • firefox - gecko
  • safari/chrome - webkit
  • opera - presto
  • ie - trident

文档参考

JavaScript 是 Oracle 注册商标,所以 javascript 标准是 ECMAScript。传统版本是 es3,现在是 es5

函数参数 Function arguments

没有参数,里面是 underfined

function check(x) {
    alert(x === undefined) //没提供参数,里面是 underfined
}
check()

点击代码,执行之

重复定义

function f(a){alert(a)}
function f(a,b,c){alert(a+','+b+','+c)}
f(1,2,3,4)
function f(a,b,c){alert(a+','+b+','+c)}
function f(a){alert(a)}
f(1,2,3,4)

arguments 是个“伪“数组,是个 object

An Array-like object corresponding to the arguments passed to a function.The arguments object is not an Array. It is similar to an Array, but does not have any Array properties except length. via mdn

function sayHi() {
  var a = arguments.shift() // error! arguments is not Array
  alert(a)
}
sayHi()

错误!(Object has no method ‘shift’)arguments 是个“伪“数组,是个 object

(function() {
  alert( {}.toString.call(arguments) )  // [object Arguments] 
})()

Using arguments as Array

(function(a,b,c){alert(arguments.length)})(1,2)

注意:是 2 而不是 3

(function(a,b,c){console.log(arguments[0]===a)})(1,2)
function sayHi() {
  var args = [].join.call(arguments, ':')
  alert(args)  // 1:2:3
}
sayHi(1,2,3)

这个办法对 numeric indexes 的 object (其实就是“数组”了,这点很象 php 数组)也能用

var obj = { 0: "A", 1: "B", length: 2 }
alert( [].join.call(obj) ) // "A,B"

非数组索引的不行,用 Object.keys()

var obj = { name: "guoshuang", age: "xxx", location: "xi\'an" }
alert( [].join.call(obj) ) // ""
alert(Object.keys(obj).length) //3

真正的数组

(function(a,b,c){
alert(Array.isArray(Array.prototype.slice.call(arguments)));
alert(Array.isArray(arguments));
})(1,2)

The arguments and named parameters reference same values. 函数 arguments 和 parameters 指向同一个值(一荣俱荣一损俱损)

f(1)
function f(x) {
  arguments[0] = 5
  alert(x) // 5, updating arguments changed x
}
f(1)
function f(x) {
  x = 5
  alert(arguments[0]) // 5, update of x reflected in arguments
}

不要试图改变 arguments(Generally, it is a good practice not to modify arguments.)

默认值

function sayHi(who) {
  who = who || 'me'  // if who is falsy, returns 'me'
  alert(who)  
}
sayHi("John")
sayHi()  // 'me'

类型检测 Type detection

检测 AAAA 是否存在 typeof

if(typeof AAA !==’undefined’){} //不推荐!

if(AAA){} //没有时,js报错

if(window.aaaa){} //正确办法

区分 Array Date 类型 [[Class]]

object,array 都是 object 类型,如何区分呢?

alert( typeof {key:'val'} ) // Object is object
alert( typeof [1,2] ) // Array is object
alert( typeof new Date ) // Date object

Fortunately, there is a hidden [[Class]] property in all JavaScript native objects. It equals “Array” for arrays, “Date” for dates etc.

var toClass={}.toString;
alert( toClass.call( [1,2] ) ) // [object Array]
alert( toClass.call( new Date ) ) // [object Date]
  1. Copy a reference to toString for objects into toClass variable.
  2. Call it, but provide the object which we are going to check as this. So, object toString becomes applied to arrays, dates etc. We have to do it, because their own toString behaves differently. For arrays it returns element list, for dates it returns the string representation.

该方法对原始类型也可以

alert( toClass.call(123) ) // [object Number]
alert( toClass.call("primitive")) ) // [object String

用 instanceof 检测数组

alert( [] instanceof Array ) 

注意:跨窗口(frame)不行!每个window有自己的 层次结构。用 [[class]] 方法

Although, it will not work if arr was created in another window or iframe and then passed into current window. That’s because each window has it’s own object hierarchy.
To workaround that, most frameworks use [[Class]] for native objects.