学习javascript语言精粹的笔记

1、枚举：

用for in 语句来遍历一个对象中所有的属性名，该枚举过程将会列出所有的属性也包括涵数和方法，如果我们想过滤掉那些不想要的值，最为常用的过滤器为hasOwnProperty方法，以及使用的typeof来排除，

var name;

for(name in another_stooge){

　　if(typeof another_stooge[name] !== "function"){

　　　　document.writeln(name + ":" + another_stooge[name]);

}

}

2、减少全局变量的污染：

a、最小化使用全局变量的一个方法是在你的应用中只创建唯一一个全局变量，

var MYAPP = {};

该变量此时变成了你的应用容器，

MYAPP.stooge = {

first-name:"joe",

last-name:"howard"

};

b、可以使用闭包的形式进行信息隐藏的方式来减少全局变量污染。

3、函数之调用方法模式：

当一个函数被保存为对象的一个属性时，我们称它为一个方法，当一个方法被调用时，this被绑定到该对象。如果一个调用表达式包含一个属性存取表达式（即一个点表达式或者[subscript]下标表达式），那么它被当作一个方法来调用。

4、this关键字的理解：

当函数以函数调用模式调用时，this被绑定到全局对象，这是语言设计上的一个错误，倘若语言设计正确，当内部函数被调用时，this应该仍然绑定到外部函数的this变量，这是设计错误的后果是方法不能利用内部函数来帮助它工作，因为内部函数的this被绑定了错误的值，所以不能共享该方法对对象的访问权，幸运的是，有一个很容易的解决方案，如果该方法定义一个变量并给它赋值为this，那么内部函数就可以通过那个变量访问到this。按照约定，我给那个变量命名为that。

简单的解释是：精粹上面是说按照编程的习性 this应该绑定父级函数的this作用域的 可是他却错误的绑定到window上了

5、new操作符的理解：

理解下new这个操作符的作用, 当存在new操作符时, 函数中的this指向的是刚刚被new创建的对象,相当于this=Object.create(). 而不带new直接调用时,是正常的函数执行,函数内部的this语句指向运行时的上下文环境.

最近看的书里面都不推荐使用函数构造器的方式构造函数, 他们把 new Function那一类和eval等到一起了. 也就是说使用new方式生成函数对象不被推荐. 但是没有文档说如何处理常规对象生成的问题

6、以下是学习精粹的练习代码

<ul id="nav">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>
<script>
var Quo = function(string){
this.status = string;
}
Quo.prototype.get_status = function(){
return this.status;
}
var myQuo = new Quo("confused");
//document.writeln(myQuo.get_status());

var add = function(a,b){
return a+b;
}
var array = [3,4];
var sum = add.apply(null,array);
//alert(sum);
var statusObject = {
status:'OK'
}
var status = Quo.prototype.get_status.apply(statusObject);
//alert(status);

/*var a=10;
var c=20;
var d={
a:50,
c:60
}
function b(){
return this.a+this.c;
}
var e={
a:100,
c:200,
b:b
};
console.log(b());
console.log(b.apply(this));
console.log(b.apply(d));
console.log(b.apply(e));
console.log(e.b());
console.log(e.b.apply(e));
console.log(e.b.apply(null));
console.log(e.b.apply(this));*/

//arguments
var sum = function(){
var i,sum = 0;
for(i=0;i<arguments.length;i++){
sum += arguments[i];
}
return sum;
}
//alert(sum(4,8,15,16,23,42));

//throw
var add = function(a,b){
if(typeof a !== "name" || typeof b !== "name"){
throw{
name:"TypeError",
message:"add needs numbers"
};
}
return a + b;
}
var try_it = function(){
try{
add("seven");
}catch(e){
alert(e.name + ":" + e.message);
}
}
//try_it();

/*var myQuo = quo("aa");和var myQuo = new Quo("aa");的区别
function Constr(){
this.name = "123";
}
function func(){
return{
name:"123",
}
}
var a = new Constr();
alert(a.constructor);
var b = func();
alert(b.constructor);*/

//颜色从黄色到白色的渐变
var fade = function(node){
var level = 1;
var step = function(){
var hex = level.toString(16);
node.style.backgroundColor = "#FFFF" +hex +hex;
if(level<15){
level += 1;
setTimeout(step,100);
}
};
setTimeout(step,100);
}
fade(document.body);

var nav = document.getElementById("nav");
var nodes = nav.getElementsByTagName("li");
//直接读取
/*for(i=0;i<nodes.length;i++){
nodes[i]['index'] = i;
nodes[i].onclick = function(event){
alert(event.target.index);
//alert(this.index);
}
}*/
//闭包的方式
var add_the_handlers = function(nodes){
var i;
for(i=0;i<nodes.length;i++){
nodes[i].onclick = function(a){
return function(event){
alert(a);
}
}(i);
}
}
add_the_handlers(nodes);

//js 记忆（缓存）
var fibonacci = function(){
var memo = [0,1];
var fib = function(n){
var result = memo
;
if(typeof result !== 'number'){
result = fib(n-1)+fib(n-2);
memo
= result;
}
return result;
}
return fib;
}();
/*
var fibonacci = memoizer([0,1],function(shell,n){
return shell(n-1) + shell(n-2);
});

var factorial = memoizer([1,1],function(shell,n){
return n*shell(n-1);
});*/

//继承
var Mammal = function(name){
this.name = name;
}

Mammal.prototype.get_name = function(){
return this.name;
}
Mammal.prototype.says = function(){
return this.saying || '';
}
var myMammal = new Mammal('Herb the Mammal');
var name = myMammal.get_name();
//alert(name);

var Cat = function(name){
this.name = name;
this.saying = 'meow';
}
Cat.prototype = new Mammal();
Cat.prototype.purr = function(n){
var i,s ='';
for(i=0;i<n;i++){
if(s){
s+='-';
}
s+='r';
}
return s;
};
Cat.prototype.get_name = function(){
return this.says() + ' ' + this.name + ' ' + this.says();
};
var myCat = new Cat('Henrietta');
var says = myCat.says(); //meow
var purr = myCat.purr(5); //r-r-r-r-r
var name = myCat.get_name();//meow Henrietta meow
//alert(says + ' '+purr+ ' ' +name);

//object.prototype是没有长度的
var numbers_object = {
'0':'zero','1':'one'
}
//alert(numbers_object); [object,object]

//传参相加
function add1(){
var sum=0,i;
for(i=0;i<arguments.length;i++){
sum +=arguments[i];
}
return sum;
}
var sum1 = add1(1,2,3,4);
//alert(sum1);

//一维数组
Array.dim = function(dimension,initial){
var a=[],i;
for(i=0;i<dimension;i++){
a[i] = initial;
}
return a;
}
var myArray = Array.dim(10,0);
//alert(myArray);

//多维数组 用0填充的4*4的矩阵
Array.matrix = function(m,n,initial){
var a,i,j,mat=[];
for(i=0;i<m;i++){
a=[];
for(j=0;j<n;j++){
a[j] = 0;
}
mat[i] = a;
}
return mat;
}
var myMatrix = Array.matrix(4,4,0);
//console.log(myMatrix);

//构造一个恒等矩阵的方法
Array.identity = function(n){
var i,mat = Array.matrix(n,n,0);
for(i=0;i<n;i++){
mat[i][i] = 1;
}
return mat;
}
myMatrix = Array.identity(4);
//document.write(myMatrix[3][3]);//1

//正则表达式
var parse_url = /^(?:([A-Za-z]+):)?(\/{0,3})([0-9.\-A-Za-z]+)(?::(\d+))?(?:\/([^?#]*))?(?:\?([^#]*))?(?:#(.*))?$/;
var url ="http://www.ora.com:80/goodparts?q#fragment";
var result = parse_url.exec(url);
//alert(result);

//正则验证数字
window.onblur = function(){
var num = document.getElementById("num").value;
//var ze = /^[0-9]*$/; //验证数字
//var ze = /^[A-Za-z]+$/; //验证大小写字母
//var ze = /^[A-Za-z0-9]+$/; //验证大小写字母和数字组合
//var ze = /^1[3|4|5|8][0-9]\d{4,8}$/; //验证手机号
//var ze = /^(\d{3,4}-)\d{7,8}$/; //验证电话号码
//var ze = /^([A-Za-z0-9_-])+@([A-Za-z0-9])+(.[a-z])+$/; //验证邮箱
var ze = /(^\d{15}$)|(^\d{17}([0-9]|x)$)/; //验证身份证号
if(num == ""){
alert("不能为空");
}else if(ze.test(num)){
alert("是的");
}else{
alert("不是的");
}
}

//一个语句不能以一个函数表达式开头，因为官方的语法假定以单词function开头的语句是一个function语句，解决办法就是把函数表达式括在一个圆括号之中，
(function(){
//函数体
})();

//arguments 不是数组，是伪数组，没有方法，是带有length成员元素的对象，

//"=="会强制类型转换，"==="这个不会强制类型转换，一般建议用后者

</script>
<input type="text" value="" name="" id="num">