JavaScript学习笔记

JavaScript基本类型

5种基本数据类型，Undefined,Null,Boolean,Number,String
1种复杂数据类型Object

函数

ECMAScript不介意你传递进来多少个参数，如

function  sayHello(name,message) {
    alert("Hello " + name  +"," + message);
}
sayHello("li","go away");

可以改写成这样

function  sayHello() {
    alert("Hello " + arguments[0]  +"," + arguments[1]);
}
sayHello("li","go away");

可以利用这种特性，实现重载

function  add() {
    if(arguments.length == 1) {
        alert(arguments[0]);
    } else {
        alert(arguments[0] + arguments[1]);
    }
}
add(10);
add(10,20);

还可以混用

function  add(num1,num2) {
    if(arguments.length == 1) {
        alert(num1);
    } else {
        alert(arguments[0] + num2);
    }
}
add(10);
add(10,20);

修改arguments中的值会同时修改命名参数的值，使2个值始终保持一致，而修改命名参数的值，不会影响arguments的值，即影响是单向的

引用类型

Object类型

var person = new Object();
person.name = "tom";
alert(person.name);
var student = {
    name : "jake",
    age : 29
}
alert(student.name);
alert(student.age);

Array类型

var colors = ["red","yellow","black"];
//在后面一直增加值
colors[colors.length] = "blue";
//也可以直接指定下标
colors[99] = "white";
//弹出100
alert(colors.length);

var colors = Array(2);
colors[0] = "yellow";
colors[1] = "red";
alert(colors[1]);
colors.length = 1;
alert(colors[1]);
//会弹出undefined，因为colors.length=1把数组的长度设为了1，后面的值被删除了

栈，队列，重排序

var colors = Array();
colors.push("yellow");
colors.push("red");
var item = colors.pop();
//显示red
alert(item);

var colors = Array();
colors.push("yellow");
colors.push("red");
var item = colors.shift();
//显示yellow
alert(item);

var values = [1,5,4,2,3,6];
values.reverse();
//输出632451
alert(values);
values.sort();
//输出123456,默认升序排列，可以定义自己的排序函数
alert(values);
function compare(value1,value2) {
    return value2 - value1;
}
values.sort(compare);
//降序排列654321
alert(values);

RegExp类型

g全局模式，i不区分大小写模式，m多行模式

//匹配字符串中所有的"at"实例
var text = /at/g;
//匹配第一个"bat"或"cat"不区分大小写
var text = /[bc]at/i;
//匹配第一个"bat"或"cat"不区分大小写，使用构造函数创建
var text = new RegExp("[bc]at","i");
//匹配第一个"[bc]at"不区分大小写,需要用到转义字符
var text = /\[bc\]at/i;
//匹配所有以"at"结尾的3个字符的组合，不区分大小写
var text = /.at/gi;
//匹配所有".at"不区分大小写

Function类型

函数是对象，函数名是指针

var sum = function(num1,num2) {
    return num1 + num2;
};
//输出30
alert(sum(10,20));
//函数名是指向函数的指针
var sum1 = sum;
//输出40
alert(sum1(20,20));
sum = null;
//输出30
alert(sum1(10,20));

javascript没有重载的原因

var sum = function(num) {
    return num + 10;
}
var sum = function(num) {
    return num + 20;
}
//输出30，第一个函数的变量被覆盖了,这就是javascript没有重载的原因
alert(sum(10));

函数声明和函数表达式的区别

//执行正确输出20
alert(sum(10,10));
function sum(num1,num2) {
    return num1 + num2;
}
//出现错误,sum is not a function
alert(sum(10,10));
var sum = function(sum1,sum2) {
    return sum1 + sum2;
}

函数可以作为值来使用，像传递参数一样把一个函数传递给另一个函数

function callSomeFunction(someFunction,someArgument) {
    return someFunction(someArgument);
}
function add10(num) {
    return num + 10;
}
var result = callSomeFunction(add10,10);
//弹出20,访问函数指针不执行函数，需要去掉圆扩号
alert(result);

将一个函数作为另一个函数的值来返回

//根据某个对象属性对数组进行排序
function createComparisonFunction(propertyName) {
    return function(object1,object2) {
        var value1 = object1[propertyName];
        var value2 = object2[propertyName];
        return value1 - value2;
    }
}
var data = [{name : "aaa",age : 28},{name : "bbb",age : 29}];
data.sort(createComparisonFunction("name"));
//输出aaa
alert(data[0].name);
data.sort(createComparisonFunction("age"));
//输出28
alert(data[0].age);

函数有2个特殊的对象，arguments和this,arguments包含着传入函数的所有参数，arguments有一个callee的属性，这是一个指针，指向拥有这个arguments对象的的函数

function factorial(num) {
    if(num <= 1)
        return 1;
    else 
        return num * factorial(num-1);
}
//输出120
alert(factorial(5));
//消除了紧密耦合
function factorial(num) {
    if(num <= 1)
        return 1;
    else
        return num * arguments.callee(num-1);
}
//输出120
alert(factorial(5));
//这样就可以直接赋值
var fact = factorial;
//输出120
alert(fact(5));

函数有2个属性，length和prototype

面向对象

理解对象

定义对象

var person = new Object();
person.name = "jake";
person.age = 29;
person.sayName = function(){
    alert(this.name);
}
//弹出对话框，输出jake
person.sayName();
var person = {
    name : "jake",
    age : 29,
    sayName : function(){
        alert(this.name);
    }

}
//弹出对话框，输出jake
person.sayName();

数据属性，描述符对象属性是configurable,enumerable,writable,value

var person = {};
//参数为属性所在的对象，属性的名字和一个描述符对象
Object.defineProperty(person,"name",{
    //不能修改
    writable : false,
    value : "jake"
});
//输出jake
alert(person.name);
person.name = "Tom";
//设置为不可修改,输出jake
alert(person.name);

访问器属性

var book = {
    //_year中的下划线是一种常用记号，表示只能通过对象方法访问的属性
    _year : 2004,
    edition : 1
}
Object.defineProperty(book,"year",{
    get : function(){
        return this._year;
    },
    set : function(newValue){
        if(newValue > 2004) {
            this._year = newValue;
            this.edition += newValue - 2004;
        }
    }
});
book.year = 2009;
alert(book.edition);

创建对象

构造函数模式

function Person(name,age) {
    this.name = name;
    this.age = age;
    this.sayName = function(){
        alert(this.name);
    }
}
var person1 = new Person("jake",29);
alert(person1.name);
Person("tom",29);//添加到window
//输出tom
window.sayName();

原型模式（和C++的默认构造函数相似）

function Person() {}
Person.prototype.name = "Mike";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName  = function(){
    alert(this.name);
}
var person1 = new Person();
//输出Mike
person1.sayName();
var person2 = new Person();
//输出Mike
person2.sayName();
//输出true
alert(person1.name == person2.name);
person1.name = "Greg";
//输出Greg,来自实例
alert(person1.name);
//输出Mike，来自原型
alert(person2.name);
delete  person1.name;
//输出Mike，来自原型
alert(person1.name);

in操作符会在通过对象能够访问给定属性时返回true,无论属性在原型中还是实例中

function Person() {}
Person.prototype.name = "Mike";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName  = function(){
    alert(this.name);
}
var person1 = new Person();
person1.name = "Greg";
//输出true,来自实例,hasOwnProperty是从Object中继承过来的
alert(person1.hasOwnProperty("name"));
//输出true,属性在实例中
alert("name" in person1);
var person2 = new Person();
//false,来自原型
alert(person2.hasOwnProperty("name"));
//输出true,属性在原型中
alert("name" in person2);

简单的原型语法

function Person(){};
Person.prototype = {
     constructor : Person,
     name : "jake",
     job : "Soft Engineer",
     sayName : function(){
         alert(this.name);
     }
 };
var person = new Person();
//输出jake
person.sayName();

原型对象的问题

function Person(){};
Person.prototype = {
    constructor : Person,
    name : "jake",
    age : 29,
    job : "Soft Engineer",
    friends : ["1","2"],
    sayName : function(){
        alert(this.name);
    }
};
var person1 = new Person();
var person2 = new Person();
person1.friends.push("3");
//输出1,2,3
alert(person1.friends);
//输出1,2,3
alert(person2.friends);
//输出true
alert(person1.friends == person2.friends)
//问题是给person1添加朋友的时候是给原型添加了朋友，结果也给person2添加了朋友

组合使用构造函数模式和原型模式
构造函数模式用于定义实例属性，原型模式用于定义方法和共享的属性

function Person(name,age,job) {
    this.name = name;
    this.age = age;
    this.job = job;
    this.friends = ["A","B"];
}
Person.prototype = {
    constructor : Person,
    sayName : function (){
        alert(this.name);
    }
}
var person1 = new Person("person1",29,"software engineer");
var person2 = new Person("person2",30,"docter");
person1.friends.push("C");
//ABC
alert(person1.friends);
//AB
alert(person2.friends);
//false
alert(person1.friends == person2.friends);
//true
alert(person1.sayName == person2.sayName);
//所有实例共享的属性constructor和方法是在原型中定义的

BOM

window对象

window对象同时扮演着ECMAScript中的Global对象，全局作用域中声明的变量和函数会变成window对象的属性和方法

var age = 29;
function sayAge() {
    alert(this.age);
}
//输出29
alert(window.age);
//输出29
sayAge();
//输出29
window.sayAge();
//运行错误,oldValue is not defined
var newValue = oldValue;
//输出undefined，是一次属性查询
var newValue = window.oldValue;
alert(newValue);

分享到：