Javascript&CSS

先来看一段代码： <div id="e1"></div> <div id="e2"></div> <script> var c1 = document.getElementById("e1"); var c2 = document.getElementById("e2"); var obj = {}; obj[c1] = 1; obj[c2] = 2; console.log(obj); </script> 上面这段代码会输出什么结果呢？答案是： Object {[object HTMLDivElement]: 2} 为什么给了 obj 两个元素，输出出来却变成了一个呢？难道 c1 和 c2 指向同一个元素？首先 c1 和 c2 是两个不同的 dom 节点，并且通过输出c1 === c2会发现结果为 false，而输出obj[c1] === obj[c2]的结果却为 true。通过上面结果可以初步推断，c1 和 c2 作为 object 的 key 时，值可能是一样的。object 的 key 所接受的值只有 string 一种，所以当 c1 这个 dom 元素作为 key 时，会被转换为 string 类型，而 c2 和 c1 由于都是 div，所以转换成 string 后，值都是一样的，c2 作为 key 也会覆盖 c1。导致出现只有一个元素的结果。如果 c2 元素变成其他类型的 dom 节点，转换为 string 类型时就会不一样，例如将 c2 改为 ul，还是上面的 js 代码，输出结果为： ...

Javascript 中继承可以分为两大类（非构造函数的继承和构造函数的继承），先从简单的说起，了解一下基于构造函数的继承。 Javascript 是一门基于原形的的语言，本身并没有类的概念，所以只能用模拟基于类的模式来实现类和类的继承。用构造函数来模拟类的概念。例如，我们定义一个 Person 类。 function Person(name, age) { this.name = name; this.age = age; } 上面就定义了一个 Person 类，包含 name 和 age 属性，下面来调用这个类。 var somebody = new Person("John", 18); alert(somebody.name); // John alert(somebody.age); // 18 OK,到这里就完成了一个简单的类的构造函数和调用方法。接下来，进一步了解类的继承，比如需要一个 Developer 的类，Developer 类需要继承 Person 类，此外还要包含工程师所会的语言（lang）和性别（sex）。还是用构造函数的方法来写这个类。 function Developer(name, age, sex, lang) { this.person = Person; this.person(name, age); delete this.person; this.sex = sex; this.lang = lang; } Developer 类就可以继承 Person 中的属性了，尝试调用一下。 var coder = new Developer("Bill", 22, "Male", "Javascript"); alert(coder.name); // Bill alert(coder.age); // 22 alert(coder.sex); // Male alert(coder.lang); // Javascript Developer 类中对于 Person 类的继承方法非常好理解，由于 Javascript 是基于函数的，而 Person 这个构造函数本质上也是函数，那么就可以用调用 Person 的方法继承它。看到这里可能有人会问，既然通过对构造函数的调用可以实现继承，那么为什么不直接使用 ...

在 SAE 的微博上看到一个叫《你是否真的了解 javascript？》的小测试，虽然只有几段代码，但却很能说明一些容易忽视的问题。 先贴下原微博的图： 第一段代码执行结果：1 Javascript 没有提供块级作用域，所以 if 语句{}中的 a，在外部是可见的。 第二段代码执行结果：1 这里 function 的名字和变量的名字一样，但是 var b = function a () {}; 这样的用法中，a 是被忽略的。也就是 funciton a 并不影响变量 a 的值。 第三段代码执行结果：输出函数本身 应该说，大家不会这么写代码 = =！，但是呢，既然这么写了，那么首先 function a() {}; 执行后，a 的值就是 function 本身， var a; 执行后，实际上没有给 a 赋值，那么 a 还是本身，如果执行 var a = 1; 再输出 a 就是 1 了。 第四段代码执行结果：10 函数接收到参数的时候，是存入到 arguments 数组里的，而参数的定义 x,y,a 则分别指向 arguments 的 0,1,2 三个位置。 所以改 argument 自然输出 a 也会变。 第五段代码执行结果：window 使用 ...

Javascript 中有一个很有意思的 new 操作符，在《Javascript 语言精粹》（Javascript:The Good Parts）中，new 被列为了不推荐的操作符。下面对于 new 的使用进行一些探究。 先来一段代码： function test() { var foo1 = new function () { this.i = 1; } var foo2 = function () { this.i = 2; } M.dis(foo1.i); //1 M.dis(foo2.i); //undefined M.dis(this.i); //undefined foo2(); M.dis(foo2.i); //undefined M.dis(this.i); //2 M.dis(foo1.prototype); //undefined M.dis(foo2.prototype); //[object Object] } *代码中的M.dis() = document.writeln() 上面代码很能说明使用 new 操作符和不使用 new 操作符的区别。 以下是本人根据以上结果对使用 new 操作符和不使用 new 操作符的一些理解。 使用 new 操作符函数会被立刻执行。不使用 new 操作符，函数会在被调用时执行。 foo1 在定义的时候就被执行了，所以输出foo1.i = 1，而foo2在定义时未被执行，所以输出foo2的结果为undefined， foo2中var foo2 = function () {}的定义形式和 function foo2 () {}的效果是一样的。 ...

constructor 和 prototype，顾名思义，是构造者（构造器）和原型的意思。 从语义的角度来看，对象 A 构造了对象 B，则 A 就是 B 的 constructor，如果对象 A 的形态来自对象 B，则对象 B 是 A 的原型。 看一段代码： function Person() { Person.prototype.name = "myname"; Person.prototype.age = 18; Person.prototype.sayName = function () { alert(this.name); }; } var person1 = new Person(); person1.sayName(); 这里 Person 就是 Person.prototype 的 constructor，为什么？因为 Person 构造了 Person.prototype。而 person1 的 prototype 不是 Person.prototype。在 person1 初始化时，可以理解成把 Person 拷贝了一份（就是 new 了一份）扔给 person1，而 Person 每 new 一次，都会从他的原形处继承（只是称为继承，方便理解）了一份 name,age,sayName。person1 是 copy 了 Person，但是 prototype 并没有 copy，所以说 person1 的 prototype 是 undefined。 ...