JavaScript高级程序设计(二)

基本类型和引用类型的值

1. 动态的属性

可以给引用类型动态添加属性和方法

var person = new Object();
person.name = "Jhon";
alert(person.name); // Jhon

2. 复制变量值

• 基本类型

var num1 = 5;
var num2 = num1;

将num2的值复制给num1，num1和num2完全独立，此后可以参与任何操作而不会相互影响

• 引用类型

浅拷贝(复制的实际上是指针，指针指向存储在堆内存中的一个对象，两个变量实际上引用同一个对象)

var obj1 = new Object();
var obj2 = obj1;
obj1.name = "Jhon";
alert(obj2.name); // Jhon

// 改变obj1(obj2)会影响obj2(obj1)

深拷贝

var obj1 = new Object();
var obj2 = JSON.parse(JSON.stringify(obj1));
obj1.name = "Jhon";
alert(obj2.name); // undefined

// 改变obj1(obj2)不会影响obj2(obj1)

3. 传递参数(可以想象为局部变量)

所有函数的参数都是按值传递的

function addTen(num){
    num+=10;
    return num;
}
var count = 20;
var result = addTen(count);
alert(count); // 20
alert(result); // 30

funtion setName(obj) {
    obj.name = "Jhon";
}
var person = new Object();
setName(person);
alert(person.name);  // Jhon

funtion setName(obj) {
    obj.name = "Jhon";
    obj = new Object();
    obj.name = "Tom";
}
var person = new Object();
setName(person);
alert(person.name);  // Jhon

检测类型

1. type of
2. instance of

执行环境及作用域(全局和局部)

var color = "blue";

function changeColor() {
    if(color === "blue") {
        color = "red";
    } else {
        color = "blue";
    }
}

changeColor();
alert(color); // blue

var color = "blue";

function changeColor() {
    var anotherColor = "red"
    function swapColors() {
        var tempColor = anotherColor;
        anotherColor = color;
        color = tempColor;
        // 这里可以访问tempColor,anotherColor,color
    }
    // 这里可以访问anotherColor,color
    swapColors();
}
// 这里可以访问color
changeColor();
alert(color); // blue
alert(anotherColor); // 报错
alert(tempColor); // 报错

作用域链

window => color, changeColor() => anotherColor, swapColor() => tempColor

延长作用域链

1. try { } catch { }的catch块
2. with语句

没有块级作用域

if (true) {
    var color = "blue";
}
alert(color); // blue

在JavaScript中，if语句会将变量添加到当前执行环境(在这里是全局环境)

for (var i = 0; i < 10; i++){
    dosomething(i);
}

alert(i); // 10

1. 声明变量

初始化变量时没有用var声明，该变量会自动添加到全局环境

function add(num1, num2) {
    var sum = num1 + num2;
    return sum;
}

var result = add(10, 20); // 30
alert(sum); // 报错

function add(num1, num2) {
    sum = num1 + num2;
    return sum;
}

var result = add(10, 20); // 30
alert(sum); // 30

2. 查询标识符

var color = 'blue';

function getColor() {
    var color = 'red';
    return color;
}

alert(color); // red

垃圾收集(垃圾回收机制)

1. 标记清除(最常用的垃圾收集方式)：变量进入环境和离开环境时进行标记，完成内存清除
2. 引用计数：当包含这个值的变量又引用了另外一个值，引用次数减1，当引用次数为0，释放这个值占用的内存(当代码存在循环引用时，存在问题)
3. 管理内存

解除引用：一旦数据不再使用，将其值设置为null来释放其引用

summary

1. 基本类型值在内存中占据固定大小的空间，因此被保存在栈内存中；复制基本类型的变量到另一个变量，会创建一个这个值的副本
2. 引用类型的值是对象，存在堆内存中；从一个变量向另一个变量复制引用类型的值，复制的是指向该对象的指针，两个变量指向同一个对象

引用类型

1. Object类型

创建Object实例的方式

• 构造函数

var person = new Onject();
person.name = "Jhon";
person.sex = "man";

• 字面量（函数传递参数经常使用）

var person = {
    name: 'Jhon',
    sex: 'man',
    5: true, // 数值属性名会自动转换成字符串
}

访问对象属性

// 点表示法
person.name

// 方括号法
person["name"]

方括号法的优点

• 可以通过变量的方式来访问属性

var propertyName = 'name';
alert(person[propertyName]);

• 如果属性名中含有非法字符或是关键字保留字

alert(person['first name']); // 含有空格

⚠️ 除非必须用变量表示属性名，否则最好使用点表示法
2. Array类型

创建数组的基本方式

• 构造函数

var colors = new Array();

var colors = new Array(20); // 创建length为20的array

var colors = new Array('red', 'blue', 'yellow');

• 字面量

var colors = ['red', 'blue', 'yellow'];

数组的length属性并不是只读属性

var colors = ['red', 'blue', 'green'];
colors.length = 2;
alert(colors[2]); // undefined

var colors = ['red', 'blue', 'green'];
colors[99]= 'black';
alert(colors.length); // 100

利用length属性在数组末尾添加新项

var colors = ['red', 'blue', 'green'];
colors[colors.length] = 'yellow';
colors[colors.length] = 'black';

检测数组

if (value instanceof Array) {
    
}

ES5新增检测方式

if (Array.isArray(value)) {
    
}

转换方法

• toLocaleString()
• toString()
• valueOf()
• join()

var colors = ['red', 'blue', 'green'];
alert(colors.join(',')); // red, blue, green
alert(colors.toString()); // red, blue, grren

⚠️ 如果数组中的某一项值为null或undefined，在使用以上转换方法时返回空字符串

栈方法

push()，pop()：先进先出

var colors = new Array();
var count = colors.push('red', 'bule'); // 从尾插入
alert(count); // 2

count = colors.push('green');
alert(count); // 3

var item = colors.pop(); // 从尾取出
alert(item); // 'green'
alert(colors.length); // 2

队列方法

shift()，unshift()：先进后出

var colors = new Array();
var count = colors.push('red', 'bule');
alert(count); // 2

count = colors.push('green');
alert(count); // 3

var item = colors.shift();  // 从头取出
alert(item); // 'red'
alert(colors.length); // 2

var colors = new Array();
var count = colors.unshift('red', 'bule'); //从头插入
alert(count); // 2

count = colors.unshift('green');
alert(count); // 3

var item = colors.pop();
alert(item); // 'blue'
alert(colors.length); // 2

兼容性：IE7及更早版本，unshift方法总是返回undefined

重排序方法

• reverse()

var values = [1, 2, 3, 4, 5];
values.reverse();
alert(values); // [5, 4, 3, 2, 1]

• sort()

var values = [1, 2, 5, 10, 15];
values.sort();
alert(values); // [1, 2, 15, 10, 5]

function compare(value1, value2) {
    if (value1 < value2) {
        retrun -1;
    }else if(value1 > value2) {
        return 1;
    }else {
        return 0;
    }
}

var values = [1, 2, 5, 10, 15];
values.sort(compare);
alert(values); // [1, 2, 5, 10, 15]

操作方法

• concat()

var colors = ['red', 'blue', 'green'];
var colors2 = colors.concat('yellow', ['black', 'brown']);

alert(colors2); // ['red', 'blue', 'green', 'yellow', 'black', 'brown']

• slice()：不会影响原始数组(开始位置，结束位置)

var colors = ['red', 'blue', 'green', 'yellow', 'purple'];
var colors2 = colors.slice(1); // blue, green, yellow, purple
var colors3 = colors.slice(1, 4);  // blue, green, yellow

• splice()

var colors = ['red', 'blue', 'green'];
var colors2 = colors.splice(0, 1);
alert(colors); // ['blue', 'green']
alert(colors2); // ['red']

var colors3 = colors.splice(1, 0, 'black', 'white');
alert(colors3); //['blue', 'black', 'white', 'green']

var colors4 = colors.splice(1, 1, 'purple', 'yellow');
alert(colors4); // ['blue', 'purple', 'yellow', 'white', 'green']

位置方法

• indexOf()：不存在返回-1

var numbers = [1,1,3,3,4,8,9,6,4,8];
alert(numbers.indexOf(4)); // 4
alert(numbers.lastIndexOf(4)); // 8

• lastIndexOf()

迭代方法

• every()：该函数对每一项都返回true，则返回true
• filter()
• forEach()：没有返回值
• map()
• some()：：该函数对任一项都返回true，则返回true

var numbers = [1,2,3,4,5,4,3,2,1];

var everyResult = numbers.every(function(item, index, array){
    return item > 2
})

alert(everyResult) // false

var someResult = numbers.some(function(item, index, array){
    return item > 2
})

alert(someResult) // true

var filterResult = numbers.filter(function(item, index, array){
    return item > 2
})

alert(filterResult) // [3,4,5,4,3]

var mapResult = numbers.filter(function(item, index, array){
    return item * 2
})

alert(mapResult) // [2,4,6,8,10,8,6,4,2]

缩小方法

• reduce()：从左往右

var values = [1,2,3,4,5]

var sum = values.reduce(function(prev, curr, index, array){
    return prev + curr
})

alert(sum) // 15

• reduceRight()：从右往左

var values = [1,2,3,4,5]

var sum = values.reduceRight(function(prev, curr, index, array){
    return prev + curr
})

alert(sum) // 15

3. Date类型

创建日期对象

var now = new Date()

ES5新增：

• Date.now()
• +new Date()

Date.parse()（ISO 8016扩展格式：YYYY-MM-DDTHH:mm:ssZ）

Date.UTC(年, 月, 日, 时, 分, 秒, 毫秒)

日期格式化方法

• toDateString()
• toTimeString()
• toLocaleDateString()
• toLocaleTimeString()
• toUTCString()

4. RegExp类型（正则）

• 实例属性

global：Boolean，是否设置了g标志

ignoreCase：Boolean，是否设置了i标志

lastIndex：Number，开始搜索下一个匹配项的字符位置

multiline：Boolean，是否设置了m标志

source：正则表达式的字符串表示

• 实例方法

exec()：返回包含第一个匹配项信息的数组

test()：返回true或false

valueOf()：返回正则表达式本身

• 构造函数属性

长属性名：input             短属性名：$_

长属性名：lastMatch     短属性名：$&

长属性名：lastParen      短属性名：$+

长属性名：leftContext   短属性名：$`

长属性名：multiline        短属性名：$*

长属性名：rightContext 短属性名：$’

var text = "this has been a short summer";

var pattern = /(.)hort/g;

if (pattern.test(text)) {
    alert(RegExp.input); // this has been a short summer
    alert(RegExp.leftContext); // this has been a
    alert(RegExp.rightContext); // summer
    alert(RegExp.lastMatch); // short
    alert(RegExp.lastParen); // s
    alert(RegExp.multiline); // false
}

• 模式的局限性

不支持向后查找

条件匹配

正则表达式注释

…
5. Function类型

function sum(num1, num2) {
    return num1 + num2;
}
alert(sum(10, 10)); // 20

var anotherSum = sum;
alert(anotherSum(10, 10)); // 20

sum = null;
alert(anothorSum(10, 10)); // 20

• 没有重载

function addNumber(num) {
    return num + 100
}

function addNumber(num) {
    return num + 200
}

addNumber(100); // 300

相当于

var addNumber = function(num) {
    return num + 100
}

addNumber = function(num) {
    return num + 200
}

addNumber(100); // 300

• 函数声明提升

alert(sum(10, 10));
function sum(num1, num2) {
    return num1 + num2;
}

以下代码会运行报错，sum使用时并不是一个函数

alert(sum(10, 10));
// 函数表达式
var sum = function(num1, num2) {
    return num1 + num2;
}

• 作为值的函数

function callSomeFunction(someFunction, someArguments) {
    return someFunction(someArguments)
}

function add10(num) {
    return num + 10
}

callSomeFunction(add10, 10); // 20

• 函数的内部属性

arguments

callee

function factorial(num) {
    if(num <= 1) {
        return 1
    }else {
        return num * factorial(num - 1)
    }
}

可以写成

function factorial(num) {
    if(num <= 1) {
        return 1
    }else {
        return num * arguments.callee(num - 1)
    }
}

this（指向调用者）

window.color = "red";
var object = {color: "blue"};

function sayColor() {
    return this.color
}

sayColor(); // red

object.sayColor = sayColor();
alert(object.sayColor()); // blue

ES5新增 - caller：调用者

function outer() {
    inner()
}

function inner() {
    alert(inner.caller())
}

outer()

function outer() {
    inner()
}

function inner() {
    alert(arguments.callee.caller())
}

outer()

• 函数属性

length：函数接收的命名参数的个数

function sayName(name) {
    return name
}

function sum(num1, num2) {
    return num1 + num2
}

function sayHi() {
    return "Hi"
}

sayName.length // 1
sum.length // 2
sayHi.length // 0

prototype

• 函数方法

call()：改变this指向；延长函数作用域；立即执行函数；传参参数必须逐个例举

function sum(num1, num2) {
    return num1 + num2
}

function callSum(num1, num2){
    return sum.call(this, num1, num2)
}

callSum(10, 10); // 20

apply()：改变this指向；延长函数作用域；立即执行函数；传参(运行函数作用域，arguments对象或参数数组)

function sum(num1, num2) {
    return num1 + num2
}

function callSum1(num1, num2){
    return sum.apply(this, arguments)
}

function callSum2(num1, num2){
    return sum.apply(this, [num1, num2])
}

callSum1(10, 10); // 20
callSum2(10, 10); // 20

延长作用域：

window.color = "red";
var object = {color: "blue"};

function sayColor() {
    return this.color
}

sayColor(); // red
sayColor.call(this); // red
sayColor.call(window); // red
sayColor.call(object); // blue

bind()：创建一个函数实例；不是立即执行函数

window.color = "red";
var object = {color: "blue"};

function sayColor() {
    return this.color
}

var objectSayColor = sayColor.bind(object)
objectSayColor(); // blue

6. 基本包装类型

• Boolean类型：与布尔值对应的引用类型

重写valueOf()：返回true或false；重写toString()：返回"true"或"false"

var falseObject = new Boolean(false);
var result = true && falseObject; // true

var falseValue = false;
var result = true && falseValue; // false

与基本类型Boolean的区别：

typeOf falseObject // object
typeOf falseValue // boolean
falseObject instanceOf Boolean // true
falseValue instanceOf Boolean // false

• String类型

charAt和charCodeAt方法：

var stringValue = "hello world"
stringValue.charAt(1); //"e"
stringValue.charCodeAt(1); //小写字母e的字符编码："101"

concat()方法：不会改变原数组

substr()方法：不会改变原数组

substring()方法：不会改变原数组

slice()方法：不会改变原数组

var stringValue = "hello world"

stringValue.slice(3); // 'lo world'
stringValue.substring(3); // 'lo world'
stringValue.substr(3); // 'lo world'
stringValue.slice(3, 7); // 'lo w'
stringValue.substring(3, 7); // 'lo w'
stringValue.substr(3, 7); // 'lo worl'


stringValue.slice(-3); // 'rld'
stringValue.substring(-3); // 'hello world'
stringValue.substr(-3); // 'rld'
stringValue.slice(3, -4); // 'lo w'
stringValue.substring(3, -4); // 'hel'
stringValue.substr(3, -4); // ''

indexOf()和lastIndexOf()方法

trim()方法：去除首尾空格

toLowerCase()方法和toUpperCase()方法

toLocaleLowerCase()方法和toLocaleUpperCase()方法

match()方法：参数为正则表达式或RegExp对象

var text = 'cat, bat, sat, fat'
var pattern = /.at/

var matches = text.match(pattern)

matches.index // 0
matches[0] // "cat"
pattern.lastIndex // 0

search()方法：返回字符串第一个匹配项的索引

replace()方法

split()方法

localeCompare()方法

var stringValue = "yellow"

stringValue.localeCompare("yellow"); // 0
stringValue.localeCompare("zoo"); // -1
stringValue.localeCompare("brick"); // 1

fromCharCode()方法：从字符编码转换成字符串

HTML方法

• Number类型：与其数字值对应的引用类型

toString()方法：参数表示返回几进制数值的字符串

var num = 10;
num.toString(); // "10"
num.toString(2); // "1010"
num.toString(8); // "12"

toFixed()方法：精确到小数点后两位

var num = 10;
num.toFixed(2); // "10.00"

num = 10.005;
num.toFixed(2); // "10.01"

toExponential()方法：指数表示法，参数表示小数位数

var num = 10;
num.toExponential(1); // "1.0e+1"

toPrecision()方法：参数表示所有数字的位数，会返回最合适的格式（格式不固定）

var num = 99;
num.toPrecision(1); // "1e+2"
num.toPrecision(2); // "99"
num.toPrecision(3); // "99.0"

7. 单体内置对象

• Global对象：windows

encodeURI()和encodeURIComponent()：用UTF-8编码替换所有的无效字符，使浏览器可以理解和接受

⚠️ encodeURIComponent()会把任何非标准字符进行编码，包括本身属于URI的特殊字符（如冒号，正斜杠，问号等），但encodeURI()不会

eval()方法

eval(alert("hi"))

// 等价于

alert("hi")

⚠️ 在eval()中创建的任何变量和函数都不会被提升；它们只在eval()执行的时候创建

• Math对象

min()和max()方法：取最小值和最大值

舍入方法：ceil()向上舍入，floor()向下舍入，round()标准舍入

Math.ceil(25.9) //26
Math.ceil(25.5) //26
Math.ceil(25.1) //26

Math.floor(25.9) //25
Math.floor(25.5) //25
Math.floor(25.1) //25

Math.round(25.9) //26
Math.round(25.5) //26
Math.round(25.1) //25

random()：返回0到1之间的一个随机数，不包含0和1