深入学习javascript

既然下决心要把前端好好研究一番，那么就一定要深入学习一下。

昨天一个朋友给我发Email 推荐了这个网址：http://blog.goddyzhao.me/JavaScript-Internal 真的很不错，非常值得认真学习一下。

需要加固的知识点：

1、加不加 var 可是有区别的哟！！

Js代码

a = 10;
alert(window.a); // 10
alert(delete a); // true
alert(window.a); // undefined
var b = 20;
alert(window.b); // 20
alert(delete b); // false
alert(window.b); // still 20

a = 10;
alert(window.a); // 10
 
alert(delete a); // true
 
alert(window.a); // undefined
 
var b = 20;
alert(window.b); // 20
 
alert(delete b); // false
 
alert(window.b); // still 20

2、关于 this（最后三个表达式添加了特定的操作之后，调用括号左侧就不再是引用类型的值了。）

Js代码

var foo = {
bar: function () {
alert(this);
}
};
foo.bar(); // Reference, OK => foo
(foo.bar)(); // Reference, OK => foo
(foo.bar = foo.bar)(); // global?
(false || foo.bar)(); // global?
(foo.bar, foo.bar)(); // global?

var foo = {
  bar: function () {
    alert(this);
  }
};
 
foo.bar(); // Reference, OK => foo
(foo.bar)(); // Reference, OK => foo
 
(foo.bar = foo.bar)(); // global?
(false || foo.bar)(); // global?
(foo.bar, foo.bar)(); // global?

3、继续关于 this （有这么一种情况下，当调用表达式左侧是引用类型的值，但是this的值却是null，最终变为全局对象。发生这种情况的条件是当引用类型值的base对象恰好为活跃对象。）

Js代码

function foo() {
function bar() {
alert(this); // global
}
bar(); // 和AO.bar()是一样的
}

function foo() {
  function bar() {
    alert(this); // global
  }
  bar(); // 和AO.bar()是一样的
}

4、上面的情况在 With 时例外

Js代码

var x = 10;
with ({
foo: function () {
alert(this.x);
},
x: 20
}) {
foo(); // 20
}

var x = 10;
 
with ({
 
  foo: function () {
    alert(this.x);
  },
  x: 20
 
}) {
 
  foo(); // 20
 
}

5、通过Function构造器创建的函数的[[Scope]]属性

Js代码

var x = 10;
function foo() {
var y = 20;
function barFD() { // FunctionDeclaration
alert(x);
alert(y);
}
var barFE = function () { // FunctionExpression
alert(x);
alert(y);
};
var barFn = Function('alert(x); alert(y);');
barFD(); // 10, 20
barFE(); // 10, 20
barFn(); // 10, "y" is not defined
}
foo();

var x = 10;
 
function foo() {
 
  var y = 20;
 
  function barFD() { // FunctionDeclaration
    alert(x);
    alert(y);
  }
 
  var barFE = function () { // FunctionExpression
    alert(x);
    alert(y);
  };
 
  var barFn = Function('alert(x); alert(y);');
 
  barFD(); // 10, 20
  barFE(); // 10, 20
  barFn(); // 10, "y" is not defined
 
}
 
foo();

问题就在于当函数通过Function构造器来创建的时候，其[[Scope]]属性永远都只包含全局对象。哪怕在上层上下文中（非全局上下文）创建一个闭包都是无济于事的。

6、发生了什么？怎么最外层的“y”变成了30？

Js代码

var x = 10, y = 10;
with ({x: 20}) {
var x = 30, y = 30;
alert(x); // 30
alert(y); // 30
}
alert(x); // 10
alert(y); // 30

var x = 10, y = 10;
 
with ({x: 20}) {
 
  var x = 30, y = 30;
 
  alert(x); // 30
  alert(y); // 30
}
 
alert(x); // 10
alert(y); // 30

x=10, y=10
对象{x: 20}添加到了作用域链的最前面
在with中遇到了var语句，当然了，这个时候什么也不会发生。因为早在进入上下文阶段所有的变量都已经解析过了并且添加到了对应的变量对象上了。
这里修改了“x”的值，原本“x”是在第二步的时候添加的对象{x: 20}（该对象被添加到了作用域链的最前面）中的“x”，现在变成了30。
同样的，“y”的值也修改了，由原本的10变成了30
之后，在with语句结束之后，其特殊对象从作用域链中移除（修改过的“x”——30，也随之移除），作用域链又恢复到了with语句前的状态。
正如在最后两个alert中看到的，“x”的值恢复到了原先的10，而“y”的值因为在with语句的时候被修改过了，因此变为了30。

7、 [] == ![] 为何等于true？一道简单的题目让我顿悟了！

自己发展一下：

Js代码

alert("000000" == false) //true
alert(["00000"] == ![]) //true
alert([""] == ![]) //true
alert("000000" == ![]) 和 alert("000000" == []) 为啥不一样呢？？
alert("" == ![]) 和 alert("" == []) 为啥又一样呢？？
alert(0 == ![]) 和 alert(0 == []) 为啥也一样呢？？

alert("000000" == false) //true
alert(["00000"] == ![]) //true
alert([""] == ![]) //true
alert("000000" == ![]) 和 alert("000000" == []) 为啥不一样呢？？ 
alert("" == ![]) 和 alert("" == []) 为啥又一样呢？？
alert(0 == ![]) 和 alert(0 == []) 为啥也一样呢？？

按照规则好好思考一下就明白喽！（有必要的话好好看看 ECMA-262 文档吧 http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf）

【完】————基础很重要！

http://ztreeapi.iteye.com/blog/1732618

posted on 2013-03-21 11:13 路人乙轩阅读(146) 评论(0) 收藏举报

刷新页面返回顶部

深入学习javascript

导航

公告