JavaScript 高级程序设计 读书笔记

var div = document.getElementById("div1");

仅供本人使用,没有很大的阅读价值

2014年2月15日21:52:46

通常javaScript放在head标签之间, 这样的话, 会在所有的javaScript代码都加载完毕之后才开始显示页面, 也就是造成显示的延迟, 这样有两个办法,可以解决, 并且这两个方法等效:

①在<Script>的属性, 设置defer="defer"

②把Script代码写在body之内

2014年2月24日20:44:56

一个变量声明但是没有初始化, 那么它的值自动获得undefined. 使用typeof()函数检测传入的参数时, 对于undefined 类型,得到的是undefined返回值. 而对于赋初值为null的变量, 得到的是object返回值, 也就是说, null 指的是对象指针, 它本身是一个对象. 而奇怪的是 undefined == null 返回的true , 这是需要值得注意的地方.

5

2014年2月25日10:45:55

在《JavaScript高级程序设计》,第二版,30页中, 说对于定义没有赋值的变量、和赋值为null变量, 它们没有toString()方法, 所以最好用String()方法来返回给定对象的值.

而在后文中说, Object的每个实例都有toString()方法, 我的疑问是难道null 和undefined类型的变量不是Object吗, 这里显得很诡异.   后来看到, 所有引用类型的值都是Object的实例.

var c = " 2";
var d = 20;
var e;
alert(e.toString());//忽略
alert(d.toString());//有显示

这里说明,他们确实没有这个方法.

2014年2月25日18:56:18

在javaScript当中创建对象和添加属性的方式很灵活

var person = new Object();
person.ownName = "special";
alert(person.ownName);//将显示special

2014年2月25日19:54:45

监测数据类型时, typeof 是一个很强有力的工具, 但是对于赋初值为null的变量和object类型的变量, 返回的都将是object.

那么可以使用instanceof操作符, 使用方法, result = variable instanceof constructor. 如果是 比如: alert(person instanceof Object);可以检测是不是Object变量.

用typeof检测函数的时候会返回function, safari和Chrome 检测正则表达式的时候会也会返回"function".

2014年2月26日10:46:42

创建对象的方式

var person = new Object();
person.name = "Lyle";
person.age = 20;

var person = {
  name : "Lyle",
  age : 20
};

2014年2月26日12:01:13

在章节,5.2.2中,有一段代码很有意思.

var colors = new Array("red","blue");
colors.push("brown");
colors[3] = "black";
alert(colors.length);//输出4

那么, 如果我直接,

colors[5] = "pink";

会怎么样.

当然, 都是undefined.

实验代码是:

var colors = ["red","blue"];
colors.push("green");
colors[6] = "pink";
for(var i=0; i<colors.length;++i)
{
    document.write("<p>"+colors[i]+"</p>");
    document.write("<br />");
};

2014年2月26日16:14:17

写正则表达式的方式有两种 ,

var p = / [bc]at/ i;
var p = new RegExp("[bc]at","i");

定义函数有两种方式,

function sum(a,b)
{
      return a+b;
}

var sum = function(a,b)
{
      return a+b;
}

2014年2月26日16:42:43

没有重载的概念, 后面定义的同名函数会覆盖前面定义的同名函数.

2014年2月26日21:00:38

原型模式, 据说, 没定义一个方法,在javaScript当中就会有一个对象,  假如在构造函数中定义了一个属于这个类型(构造函数)的方法(展示叫做show()), 那么,每次调用这个构造方法创建对象的时候. 不同的实例中的show()是不一样的. 那么意思就是说, 每个实例的show()功能都是一样的,但是却用的是不同的对象. 多么浪费啊.

解决的办法就是原型模式, 把成员属性和方法都加到构造函数的prototype里面就可以了, 这里需要理解的就是,其实prototype其实也是一个对象.

原型模式的代码:

function Person(){
}

Person.prototype.name = "Lyle";
Person.prototype.age = 20;
Person.prototype.job = "software engineer";
Person.prototype.sayName = function()
{
    alert(this.name);
};

var person1 = new Person();
person1.sayName();

var person2 = new Person();
person2.sayName();

简化模式的带代码

function Person {}
Person.prototype = {
    name : "Lyle",
    age : 20,
    job : "software engineer",
    sayName : function (){
        alert(this.name);
    };
};

2014年2月27日13:17:36

//一般情况下, 都是构造函数模式和原型模式的组合

function Person(name ,age, job)
{
    this.name = name;
    this.age = age;
    this.job = job;
    this.friends = ["shelby","Court"];
}

Person.prototype = {
    constructor : Person ,
    sayName : function()
    {
        alert(this.name);
    }
}

2014年2月27日13:29:30

我有一个问题不明白, 那就是书里面说寄生构造函数模式 和 稳妥构造函数模式, 的严正区别. 寄生模式,返回的是一个Object对象, 和构造函数原型没有什么区别.

打算先不管这些, 然后那些继承也先不管

2014年2月27日15:28:07

arguments.callee 是指向正在执行函数的指针. 在递归中用它来调用函数是再好不过的选择了.

2014年2月28日11:37:23

获得窗口大小以及窗口位置的方式

var text = "the width of this window is ";
text +=window.screen.width;
text +="<br /> the height of this window is ";
text +=window.screen.height;
text +="<br />the screenleft is ";
text +=window.screenX;
text +="<br />the screenTop is ";
text +=window.screenY;

document.write(text);

2014年2月28日16:23:14

打开新窗口

window.open("http://www.baidu.com","newWindow","height=400,width=400,top=10,left=20,resizable=yes");

2014年2月28日19:46:23

/*位置操作,立即打开新的URL,这里指的是本地url*/
/*location.assign("http://www.baidu.com");
 *window.location("http://www.baidu.com"
 * /
location.href="http://www.baidu.com";//

2014年3月2日15:14:38

在html中，利用<script language="javascript" type="text/javascript" src="./script.js"></script>引入的两个js是不可以相互调用的

2014年3月2日15:35:43

<div id="div1">
    <ul style="background-color: saddlebrown; text-align: left">
        <li>生活是一种无奈</li>
        <li>生活是不知所措</li>
        <li>生活充满了挑战</li>
        <li>生活意味你还活着</li>
    </ul>
</div>

在这里,对于

var div = document.getElementById("div1");

返回的div中, div的childNodes 中有三个字节点,如果写成

<div id="div1"><ul style="background-color: saddlebrown; text-align: left">
        <li>生活是一种无奈</li>
        <li>生活是不知所措</li>
        <li>生活充满了挑战</li>
        <li>生活意味你还活着</li>
    </ul></div>

则,只有一个子节点.

代码如下

var div = document.getElementById("div1");

var arrayOfNodes = Array.prototype.slice.call(div.childNodes,0);

document.write(arrayOfNodes+"<br />");

for(var i=0; i<arrayOfNodes.length; ++i)
{
    var a = arrayOfNodes[i];
    document.write(">>>"+a.nodeName+"  "+ a.nodeType+"  "+a.nodeValue+"<br />");
}

输出

[object Text],[object HTMLUListElement],[object Text]
>>>#text 3
>>>UL 1 null
>>>#text 3