《JavaScript高等程序设计》（第3版）读书笔记第5章援用范例

2024年1月20日 179次阅读来源: 陈思达

援用范例的值（对象）是援用范例的一个实例。
援用范例是一种数据组织，用于将数据和功用组织在一同。它偕行被称为类，但这类称谓并不稳健，只管ECMAScript从技术上讲是一门面向对象的言语，但他不具备传统的面向对象言语所支撑的接口等基础组织。
援用范例有时刻也被称为对象定义
关于typeof中的”object”和Object()组织函数的个人明白：
- typeof操纵符返回的”object”值指的是数据范例
- 在new Object()中”Object”示意的是数据组织（援用范例），所以new Object()返回的是基于Object援用范例的一个实例
- typeof返回的”function” 和 Function()组织函数同理

Object范例

建立对象的要领一个new Object()，另一个是对象字面量示意法
字面量示意法的末了一个属性不能增加逗号，如许会在IE7之前和Opera中致使毛病
属性名会自动转换为字符串
属性名中包含关键字、保留字会报错
一般，除非必需运用变量来接见属性，不然我们发起运用点示意法

// 这里一切的属性名都邑自动转为字符串
var person = {
    "name": "Nicholas",
    age: 29,
    5: true
}

// 不会报错，但这个属性不能运用person.name的体式格局
person["first name"]

Array范例

建立数组的基础体式格局有两种。运用Array组织函数，字面量示意法

var colors = new Array();
var colors = new Array(20);                        // 传入一个数值 建立一个length为20的空数组
var colors = new Array("red");                     // 传入非数值 因而为元素的数组
var colors = new Array("red", "blue", "green");

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

var colors = ["red", "blue", "green"];
colors[colors.length] = "black";
colors[colors.length] = "brown";            // 增加新项

var colors = ["red", "blue", "green"];
colors[99] = "black";
alert(colors.length);            // 100 位置3到98的值都不存在，都将返回undefined

检测数组

关于一个网页或许一个全局作用域而言，运用instanceof操纵符便可以获得效果

if (value instanceof Array) {
    ...
}

假如网页中包含多个框架，实际上就存在两个以上的差异全局实行环境，从而存在两个以上差异版本的Array组织函数，为此ECMAScript5新增了Array.isArray()要领.IE9+,Firefox4+,safari5+,Opera10.5+ Chrome

if (Array.isArray(value)) {
    ...
}

转换要领

一切对象都据欧toLocaleString(),toString(),valueOf()要领。toString()返回由逗号拼接的字符串，valueOf()返回的照样数组
join() 假如传入undefined，默许逗号分开，IE7之前的版本会毛病的以undefined分开
假如数组中某一项是null或许undefined，那末该值在join(),toLocaleString(),toString(),valueOf()要领返回的效果以空字符串示意

栈要领

栈是一种LIFO（Last-In-First-Out 后进先出）的数据组织。而栈中的插进去（推入）和移除（弹出），只发生在一个位置——栈的顶部。ECMAScript为数组特地供应了push()和pop()要领

var colors = ["red", "blue", "green"];
var item = colors.pop();
alert(colors.length);        //    2
alert(item)                  //    “black”获得末了一项

行列要领

行列数据组织的接见划定规矩是FIFO(First-In-First-Out 先进先出)
shift()要领能移出数组的第一项并返回该项，连系运用shift()和push()要领可以完成
unshift()要领能在数组前端增加恣意个项并返回新数组的长度, IE7以下的版本老是返回undefined，IE8在非兼容情势下会返回准确的长度值

var colors = ["red", "blue", "green"];
colors.push("black");
var item = colors.shift();
console.log(colors);        //  ["blue", "green", "black"]
console.log(item)                  //    “red”获得末了一项

var colors = new Array();
colors.unshift("red", "green");        // 推入两项
console.log(colors.length);            // 2

重排序要领

数组存在两个直接重排序的要领 reverse() sort()
reverse()直接返回将原数组倒序分列
sort() 挪用每项的toString()转型要领，依据升序分列，纵然数组中的每一项都是数值，sort()要领比较的也是字符串
sort()可传入一个比较函数，比较函数吸收两个参数，假如第一个参数应当位于第二个之前

var values = [0, 1, 5, 10, 15];
values.sort();
console.log(values);         // 0,1,10,15,5

// 运用比较函数是sort的最好运用体式格局
function compare(value1, value2) {
    if (value1 < value2) {
        return -1;
    } else if (value1 > value2) {
        return 1;
    } else {
        return 0;
    }
}
var values = [0, 1, 10, 15,  5];
values.sort(compare);
console.log(values);         // 0,1,5,10,15

// 关于数值范例或许其valueOf()要领会返回数值范例的对象范例
// 可以运用一个更简朴的比较函数
function compare(value1, value2) {
    return value2 - value1
}

操纵要领

concat() 先建立一个数组副本，再将传入的元素增加到新数组的末端

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

alert(colors); // red,green,blue
alert(colors2);    // red,green,blue,yellow,black,brown

slice()可以吸收一个或两个参数，基于当前数组建立新数组，返回指定位置之间的一切项，slice()要领不会影响原数组
假如slice参数有一个负数，则用数组长度加上该数来肯定响应的位置

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

splice() 最壮大的数组要领，一向返回一个数组，该数组中包含从原始数组中删除的项（没有就返回空数组）
- 删除：可以删除恣意数目的项，只需指定2个参数：要删除的第一项的位置和要删除的项数
- 插进去：可以向指定位置插进去恣意数目的项，只需供应3个参数：肇端位置、0（插进去操纵没有要删除的项所所以0）和要插进去的项，多个可以传恣意个数的参数
- 替代：可以向指定位置插进去恣意数目的项，且同时删除恣意数目的项，删除的项数没必要与插进去的项数相称

var colors = ["red", "green", "blue"];
var removed = colors.splice(0, 1);                    // 删除第一项 removed 为 ["red"]
alert(colors);                                        // ["green", "blue"]

removed = colors.splice(1, 0, "yellow", "orange");    // 从位置1最先插进去两项
console.log(colors);                                  // green,yellow,orange,blue
console.log(removed);                                 // 返回空数组

removed = colors.splice(1, 1, "red", "purple");       // 插进去两项，删除一项
console.log(colors);                                  // green,red,purple,orange,blue
console.log(removed);                                 // ["yellow"]

位置要领

数组有两个位置要领，都吸收两个参数：要查找的项和（可选）示意查找气垫位置的索引，返回查找对应项的位置，没有找到返回-1。在比较第一个参数与数组中的每一项时，会运用全等操纵符；
indexOf() 从开首（位置0）查找
lastIndexOf() 从末端最先向前查找
支撑的浏览器 IE9+, Firefox2+, safari3+, Opera9.5+ Chrome

var numbers = [1,2,3,4,5,4,3,2,1];
alert(numbers.indexOf(4));            //    3
alert(numbers.lastIndexOf(4));        //    5

alert(numbers.indexOf(4, 4));            //    5
alert(numbers.lastIndexOf(4, 4));        //    3

var person = { name: "Nicholas" };
var people = [{ name: "Nicholas" }];

var morePeople = [people];

alert(people.indexOf(person));            // -1
alert(morePeople.indexOf(person));        // 0

// 两个援用范例对象值完整雷同，但援用的内存地址差异
var a = { name: "obj" }
var b = { name: "obj" }
a == b                    //   false
a === b                    //   false

迭代要领

ECMAScript5位数组定义了5个迭代要领，每一个要领都吸收两个参数：要在每一项上运转的函数和（可选的）运转该函数的作用域对象——影响this的值。传入这些要领中的函数会吸收三个参数：数组项的值，该项在数组中的位置和数组对象自身。
every():对数组中的每一项运转给定函数，假如该函数对每一项都返回true，则返回true
filter():对数组中的每一项运转给定函数，返回该函数会返回true的项构成的数组
forEach():对数组中的每一项运转给定函数。这个要领没有返回值
map():对数组中的每一项运转给定函数，返回每次函数挪用的效果构成的数组。
some():对数组中的每一项运转给定函数，假如该函数对任一项返回true，则返回true。
以上要领都不会修正数组中的包含的值
支撑的浏览器 IE9+, Firefox2+, safari3+, Opera9.5+ Chrome

合并要领

ECMAScript5新增了两个合并数组的要领 reduce()和reduceRight()。迭代数组的一切项，然后构建一个终究返回的值
reduce() 从数组的第一项最先，逐一遍历到末了
reduceRight() 则从末了一项最先
支撑的浏览器 IE9+, Firefox3+, safari4+, Opera10.5+ Chrome

var values = [1,2,3,4,5];
// prev 前一项， cur 迭代确当前项
// 第一次实行回调函数，prev是1，cur是2
var sum = values.reduce(function(prev, cur, index, array) {
    return prev + cur;
});
alert(sum);         // 15

Date范例

下面两行代码是等价的，Date组织函数会在背景挪用Date.parse()
不必Date.parse()或Date.UTC() 都是基于体系设置当地时区建立的
Date.now() 返回挪用时日期和时刻的毫秒数，支撑的浏览器IE9+, Firefox3+, safari3+, Opera10.5+ Chrome

var someDate = new Date(Date.parse("May 25, 2004"));
var someDate = new Date("May 25, 2004");

// GMT时刻200年1月1日半夜零时
var y2k = new Date(Date.UTC(2000, 0));
var y2k = new Date(2000, 0);

// GMT时刻2005年5月5日下昼5:55:55
var allFives = new Date(Date.UTC(2005, 4, 5, 17, 55, 55));
var allFives = new Date(005, 4, 5, 17, 55, 55);

// Date.now()在不支撑的浏览器中以下写法
var start = +new Date();
start           // 返回毫秒数
typeof start     // "number"

继承要领

toLocaleString()和toSring()的这一差异仅在调试代码时比较有用
valueOf()要领，不返回字符串，返回日期的毫秒示意

var date1 = new Date(2007, 0, 1);        // "January 1 , 2007"
var date2 = new Date(2007, 1, 1);        // "February 1, 2007"

console.log(date1 < date2);             // true
console.log(date1 > date2);             // false

日期花样化要领

toDateString() 特定花样显现礼拜几、月、日和年
toTimeString() 特定花样显现时、分、秒和时区
toLocaleDateString() 特定于区域花样显现礼拜几、月、日和年
toLocaleTimeString() 特定于区域完成的花样显现时、分、秒
toUTCString() 特定于完成的花样UTC日期

日期/时刻组件要领

图表略…

RegExp范例

ECMAScript经由过程regExp范例来支撑正则表达式
每一个正则表达式都可带有一或多个标志（flags）
g：示意全局情势（global），即情势将被运用于一切字符串，而非在发明第一个婚配项时马上住手
i:示意不辨别大小写（case-insensitive）情势，即在肯定婚配项时疏忽情势与字符串的大小写
m:示意多行情势（multiline），即在抵达一行文本末端时还会继承查找下一行中是不是存在于情势婚配的项

// 婚配字符串中一切“at”的实例
var pattern1 = /at/g;

// 婚配第一个"bat"或"cat"，不辨别大小写
var pattern2 = /[bc]at/i;

// 婚配一切以"at"末端的3个字符的组合，不辨别大小写
var pattern3 = /.at/gi;

情势中运用的一切元字符都必需转义：( [ { ^ $ | ) ? * + . ] }
运用RegExp组织函数，两个参数都必需是字符串，一切元字符都要两重转义

// 婚配第一个"bat"或"cat", 不辨别大小写
var patter1 = /[bc]at/i;

// 婚配第一个"[bc]at", 不辨别大小写
var pattern2 = /\[bc\]at/i;

// 婚配一切以"at"末端的3个字符的组合，不辨别大小写
var pattern3 = /.at/gi

// 婚配一切".at",不辨别大小写
var pattern4 = /\.at/gi;
// 运用RegExp组织函数，一切元字符都要两重转义
// 两个参数都必需是字符串
var pattern4 = new RegExp("\\.at", "i");

我们可以运用小括号”()”来指定要重复的子表达式，然后对这个子表达式举行重复，比方：(abc)? 示意0个或1个abc 这里一个括号的表达式就示意一个分组。分组可以分为两种情势，捕捉组和非捕捉组。
捕捉组可以经由过程从左到右盘算其开括号来编号。比方，在表达式 (A)(B(C)) 中，存在四个如许的组。组零一向代表全部表达式。之所以如许定名捕捉组是由于在婚配中，保留了与这些组婚配的输入序列的每一个子序列。在表达式中运用，也可以在婚配操纵完成后从婚配器检索。
编号项目
0 (A)(B(C))
1 (A)
2 (B(C))
3 (C)
以 (?) 开首的组是纯的非捕捉组(?:Pattern)，它不捕捉文本，也不针对组算计举行计数。就是说，假如小括号中以?号开首，那末这个分组就不会捕捉文本，固然也不会有组的编号。非捕捉组则不会捕捉文本，也不会将它婚配到的内容零丁分组来放到内存中。所以，运用非捕捉组较运用捕捉组更节约内存。

编号	项目
0	(A)(B(C))
1	(A)
2	(B(C))
3	(C)

RegExp实例属性

RegExp的每一个实例都具有以下属性，经由过程这些属机可以获得有关情势的种种信息
- global 布尔值示意是不是设置了g标志
- ignoreCase 布尔值示意是不是设置了i标志
- lastIndex 整数示意最先搜刮下一个婚配项字符位置，从0算起
- multiline 布尔值示意是不是设置了m标志
- source 正则表达式的字符串示意，依据字面量情势而非传入组织函数中的字符串情势返回

var pattern1 = /\[bc\]at/i;
console.log(pattern1.global);            // false
console.log(pattern1.ignoreCase);        // true
console.log(pattern1.multiline);         // false
console.log(pattern1.lastIndex);         // 0
console.log(pattern1.source);            // "\[bc\]at"

RegExp实例要领

exec() 特地为捕捉组而设想的，吸收一个参数，即要运用情势的字符串，然后返回包含第一个婚配项信息的数组；或许在没有婚配项的情况下返回null
返回的数组虽然是Array的实例，但包含两个分外的属性：index和input
index示意婚配项在字符串中的位置
input示意表达式的字符串
纵然在情势中设置了全局标志(g)，exec()每次也只会返回一个婚配项，不设置g的时刻，每次都返回第一个婚配项，设置了g的情况下，每次挪用exec()则都邑在字符串中继承查找新婚配项

var txt = "mom and dad and baby";
var pattern = /mom( and dad( and baby)?)?/gi;

var matches = pattern.exec(txt);
console.log(matches);            
//    ["mom and dad and baby", " and dad and baby", " and baby", index: 0, input: "mom and dad and baby", groups: undefined]

test() 吸收字符串参数，婚配返回true不婚配返回false

var txt = "000-00-0000";
var pattern = /\d{3}-\d{2}-\d{4}/;
if (pattern.test(txt)) {
    alert("The pattern was matched.");
}

toString() toLocaleString() 都邑返回正则表达式的字面量，与建立表达式的体式格局无关
valueOf() 返回正则表达式自身

RegExp组织函数属性

RegExp组织函数包含一些属性，适用于作用域中的一切表达式，而且基于所实行的近来一次正则表达式操纵而变化
这些属性离别有一个长属性名和一个短属性名（Opera破例，不支撑短属性）

长属性名	短属性名	申明
input	$_	近来一次要婚配的字符串。Opera不支撑
lastMatch	$&	近来一次的婚配项目。Opera不支撑
lastParen	$+	近来一次婚配的捕捉组。Opera不支撑
leftContext	$`	input字符串中lastMatch之前的文本。
multiline	$*	布尔值示意是不是一切表达式都是用多行情势。IE和Opera未完成此属性
rightContext	$’	input字符串中lastMatch今后的文本。

运用这些属机可以从exec() test()实行的操纵中提取更详细的信息

var txt = "this has been a short summer";
var pattern = /(.)hort/g;

// Oper不支撑input,lastMatch,lastParen,multiline
// IE不支撑multiline
if (pattern.test(txt)) {
    console.log(RegExp.input);                            // this has been a short summer
    console.log(RegExp.leftContext);                      // this has been a
    console.log(RegExp.rightContext);                     // summer
    console.log(RegExp.lastMatch);                        // short
    console.log(RegExp.lastParen);                        // s
    console.log(RegExp.multiline);                        // false
}

短属性名斗殴不是有用的ECMAScript标识符，因而必需经由过程方括号语法来接见

var txt = "this has been a short summer";
var pattern = /(.)hort/g;


// Oper不支撑input,lastMatch,lastParen,multiline
// IE不支撑multiline
if (pattern.test(txt)) {
    console.log(RegExp.$_);                            // this has been a short summer
    console.log(RegExp.["$`"]);                      // this has been a
    console.log(RegExp.["$'"]);                     // summer
    console.log(RegExp.["$&"]);                        // short
    console.log(RegExp.["$+"]);                        // s
    console.log(RegExp.["$*"]);                        // false
}

除了上面引见的几个属性以外，另有多达9个用于存储捕捉组的组织函数属性：RegExp.$1,RegExp.$2……RegExp.$9

var txt = "this has been a short summer";
var pattern = /(..)or(.)/g;

// 这里建立了一个包含两个捕捉组的情势，并用该情势测试了一个字符串。
// 纵然test()要领只返回一个布尔值，但RegExp组织函数的属性$1和$2也会被婚配响应捕捉组的字符串自动添补
if (pattern.test(txt)) {
    console.log(RegExp.$1);        // sh
    console.log(RegExp.$2);        // t
}

情势的局限性

只管ECMACScript中的正则表达式功用照样比较完整的，但依然缺乏某些言语所支撑的高等正则表达式特征
下面列出了不支撑的特征
- 婚配字符串最先和末端A 和 Z 锚（但支撑以插进去标记 ^ 和美圆标记 $ 来婚配字符串的最先和末端）
- 向后查找（lookbehind）（但完整支撑向前查找lookahead）
- 并集和交集
- 原子组（atomic grouping）
- Unicode支撑（延宕字符串除外，如 uFFFF）
- 定名的捕捉组（但支撑编号的捕捉组）
- s（single，单行）和 x （free-spacing，无距离）婚配情势
- 前提婚配
- 正则表达式诠释

Function范例

每一个函数都是Function范例的实例，而且都与其他援用范例一样具有属性和要领
由于函数是对象，因而函数名实际上也是只想函数对象的指针，不会与某个函数绑定

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

// 下面运用函数表达式定义函数的体式格局险些相差无几
// function背面没必要运用函数名，经由过程变量sum即可饮用函数
// 函数末端有一个分号，就像声明其他变量一样
var sum = function(num1, num2) {
    return num1 + num2;
};

不引荐 末了一种牢固翼函数的体式格局是运用Function组织函数，可以吸收恣意数目的参数，但末了一个参数一向但被算作是函数体，而前面的参数则罗列出了新函数的参数。如许会致使剖析两次代码，第一次是剖析通例ECMAScript代码，第二次是剖析传入组织函数中的字符串，从而影响机能。

// 不引荐
var sum = new Function("num1", "num2", "return num1 + num2");

函数名是指向函数的指针，因而函数名与包含对象指针的其他变量没有区分。一个函数可以会有多个名字

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

var anotherSum = sum;                    // 函数指针的副本赋给了anotherSum

sum = null;                              // 清除了sum变量 anotherSum依旧有用
console.log(anotherSum(10, 10));         // 20

没有重载（深切明白）

function addSomeNumber(num) {
    return num + 100;
}
function addSomeNumber(num) {
    return numm + 200;
}
var result = addSomeNumber(100);    // 300

// 这个例子中声清楚明了两个同名函数，而效果是背面的函数覆蓋了前面的函数
// 以下代码等同于上面的代码

var addSomeNumber = function (num ) {
    return num + 100;
};
addSomeNumber = function (num ) {
    return num + 200;
};
var result = addSomeNumber(100);    // 300

在建立第二个函数时，实际上覆蓋了援用第一个函数的变量addSomeNumber

函数声明与函数表达式

剖析器会先解读函数声明，并使其在实行任何代码之前可用
函数表达式，则必需比及剖析器实行到它地点的代码行，才会真正被诠释实行
也可以同时运用函数声明和函数表达式，（var sum = function sum () {};）不过在Safari中会致使毛病

// 不会报错
alert(sum(10, 10));
function sum(num1, mun2) {
    return num1 + num2;
}

// 报错
alert(sum(10, 10));
var sum = function (num1, mun2) {
    return num1 + num2;
};

作为值的函数

函数名自身就是变量，所以函数也可以作为值来运用。也就是说，不仅可以像通报参数一样把一个函数通报给另一个函数，而且可以将一个函数作为另一个函数的效果返回


function callSomeFunction(someFunction, someArgument) {
    return someFunction(someArgument);
}

function add10(num) {
    return num + 10;
}

// 传入函数指针，就不能加()，所以这里是add10
var result1 = callSomeFunction(add10, 10);

可以从一个函数中返回另一个函数

function createComparisonFunction(propertyName) {
    return function(object1, object2) {
        var value1 = object1[propertyName];
        var value2 = object2[propertyName];
        
        if (value1 < value2) {
            return -1;
        } else if (value1 > value2) {
            return 1;
        } else {
            return 0;
        }
    }
}

函数内部属性

在函数内部，有两个迥殊的对象：arguments this
arguments的重要用途保留函数参数，这个对象另有一个属性callee，该属性是一个指针，指向具有这个arguments对象的函数

// 典范的阶乘函数
function factorial(num) {
    if (num <= 1) {
        return 1;
    } else {
        return num * factorial(num-1);
    }
}

// 如上面代码，在函数有名字，而且名字今后也不会变的情况下，如许定义没有题目
// 但这个函数的实行与函数名factorial牢牢耦合在了一同
// 下面的写法可以防止这类题目
function factorial(num) {
    if (num <= 1) {
        return 1;
    } else {
        return num * arguments.callee(num-1);
    }
}

var trueFactorial = factorial;

fatorial = function () {
    return 0;
};

console.log(trueFactorial(5));        // 120
console.log(fatorial(5));             // 0

this 援用的是函数实行的环境对象——或许说是this 值（当在网页全局作用域中挪用函数时，this对象援用的是window）

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

function sayColor() {
    console.log(this.color);
}

sayColor();        // "red"

o.sayColor = sayColor;
o.sayColor();        // "blue"

ECMAScript 5 范例化了另一个函数对象的属性：caller 。Opera夙兴版本不支撑，其他浏览器都支撑这个ECMAScript 3并没有定义的属性。caller保留着挪用当前函数的函数援用，在全局作用用户中挪用当前函数，它的值为null

function outer() {
    inner();
}

function inner() {
    console.log(inner.caller);
}

// 打印出outer()函数的源码
// 由于outer挪用了inner，所以inner.caller就指向outer()。
outer();

// 为了完成更松懈的耦合，也可以经由过程arguments.callee.caller来接见
function outer() {
    inner();
}
function inner() {
    console.log(arguments.callee.caller);
}
outer();

当函数再严厉情势下运转时，接见arguments.callee会致使毛病。ECMAScript 5 还定义了arguments.caller属性，严厉情势下也会致使毛病，而在非严厉情势下这个属性一向是undefined。定义这个属性是为了分清arguments.caller和函数的caller属性。以上变化都是为了增强这门言语的平安性，如许第三方代码就不能再雷同的环境里窥视其他代码了。
严厉情势另有一个限定：不能为函数caller属性赋值，不然会致使毛病。

函数属性和要领

每一个函数都包含两个属性：length 和 prototype
- length示意函数愿望吸收的定名参数的个数
- prototype 关于援用各范例而言，prototype是保留它们一切实例要领的真正地点。换言之，注入toString() valueOf()等要领实际上都保留在prototype名下，只不过是经由过程各自对象的实例接见罢了。在建立自定义援用范例以及完成继承时，prototype属性的作用是极为重要的。
- 在ECMAScript 5 中，prototype属性是不可罗列的，因而运用for-in没法发明。
每一个函数都包含两个非继承而来的要领：apply() call()。这两个要领的用途都是在特定的作用域中挪用函数，实际上即是设置函数体内this对象的值。
- apply()要领吸收两个参数：一个是在个中运转函数的作用域，另一个是参数数组。个中，第二个参数可以是Array的实例，也可以是arguments对象
- 在严厉情势下，未指定对象而挪用函数，则this值不会转型为window。除非明白把函数增加到某个对象或许挪用apply() 或 call()，不然this值将是undefined。
- call()要领与apply()的作用雷同，它们的区分仅在于吸收参数的体式格局差异。关于call()而言，第一个参数是this值没有变化，差异的是其他参数都直接通报给函数。换言之，在运用call()要领时，通报给函数的参数必需逐一枚举出来

// callSum1()在实行sum()函数时传入了this作为this值,所以传入的就是window对象
function sum(num1, num2) {
    return num1 + num2;
}
function callSum1(num1, num2) {
    return sum.apply(this, arguments);                //    传入arguments对象
}

function callSum2(num1, num2) {
    return sum.apply(this, [num1, num2]);            //     传入数组
}

function callSum3(num1, num2) {
    return sum.call(this, num1, num2);            //     传入数组
}

// 在全局环境下挪用函数，此时this就是window
callSum1(10, 10));                                    // 20
callSum2(10, 10));                                    // 20
callSum3(10, 10));                                    // 20

apply() call() 真正壮大的处所是可以扩大函数赖以运转的作用域。

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

function sayColor() {
    console.log(this.color);
}

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

运用call() apply() 来扩大作用域的最大优点，就是对象不须要与要领有任何耦合关联
ECMAScript 5 还定义了一个要领： bind() 这个要领会建立一个函数的实例，其this值会被绑定到传给bind()函数的值.支撑bind（）要领的浏览器IE9+, Firefox 4+,Safari 5.1+, Opera 12+ Chrome

window.color = "red";
var o = { color: "blue" };
function sayColor() {
    console.log(this.color);
}

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

每一个函数继承的toLocaleString() 和 toString() valueOf() 要领都当中返回函数的代码。

基础包装范例

为了便于操纵基础范例值，ECMAScript还供应了3个迥殊的援用范例： Boolean, Number, String
每当读取一个基础范例值得时刻，背景就会建立一个对应的基础包装范例的对象，从而让我们可以挪用一些要领来操纵这些数据。

// 背景自动完成以下处置惩罚
// 建立String范例的一个实例
// 在实例上挪用指定的要领
// 烧毁这个实例
var s1 = "some text";
var s2 = s1.substring(2);

// 可以设想实行了以下代码
var s1 = new String("some text");
var s2 = s1.substring(2);
s1 = null;
// 经由此番处置惩罚，基础的字符串值就变得跟对象一样了。

以上步骤也离别适用于Boolean Number范例对应的布尔值和数字值
援用范例与基础包装范例的重要区分就是对象的生存期。运用new操纵符建立的援用范例的实例，在实行流脱离当前作用域之前都一向保留在内存中。而自动建立的基础包装范例的对象，则只存在于一行代码的实行霎时，然后马上烧毁。这意味着我们不能再运转时为基础范例值增加属性和要领

var s1 = "some text";
// 这里建立的String对象在实行第三行代码时就已被烧毁了
s1.color = "red";
// 这里又建立了本身的String对象，而该对象没有color属性
console.log(s1.color);          // undefined

可以显式的挪用Boolean,Number,String来建立基础包装范例的对象。但应当在必要的时刻如许做，由于很轻易分不清着实处置惩罚基础范例照样援用范例的值。
对基础包装范例的实例挪用typeof会返回”object”，而且一切基础包装范例的对象都邑被转为布尔值true
Object组织函数也会像工场要领一样，依据传入值的范例返回响应基础包装范例的实例。

var obj = new Object("some text");
console.log(obj instanceof String);         // true

运用new挪用基础包装范例的组织函数，与直接挪用同名的转型函数是不一样的

// number中保留的是基础范例的值25
// obj中保留的是Number的实例（对象）
var value = "25";
var number = Number(value);     // 转型函数
console.log(typeof number);     // "number"

var obj = new Number(value);    // 组织函数
console.log(typeof obj);        // "object"

Boolean范例

Boolean范例的实例重写了valueOf()要领，返回基础范例值true或false
重写了toString()要领，返回字符串”true” “false”
但是Boolean对象在ECMAScript中的用途不大，由于常常形成误会。个中最常见的题目就是在布尔表达式中运用Boolean对象
基础范例与援用范例的布尔值另有两个区分。
- typeof操纵符对基础范例返回”boolean”, 援用范例返回”object”
- 由于Boolean对象是Boolean范例的实例，所以运用instanceof操纵符测试Boolean对象会返回true，而测试基础范例的布尔值则返回false

// 运用Boolean对象天生的实例，在布尔表达式中，等同于一个一般对象
// 所以result1 返回true
var falseObject = new Boolean(false);
var result1 = falseObject && true;                   // true

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

console.log(typeof falseOjbect);                    // object
console.log(typeof falseValue);                     // boolean
console.log(falseObject instanceof Boolean);        // true
console.log(falseValue instanceof Boolean);         // false

明白基础范例的布尔值与Boolean对象之间的区分非常重要——固然，我们发起是永久不要运用Boolean对象

Number范例

toLocaleString() toString() 返回字符串情势的数值
valueOf() 返回基础范例的数值
toString() 通报一个示意基数的参数，通知它返回几进制的字符串情势

var num = 10;
console.log(num.toString());                      // "10"
console.log(num.toString(2));                     // "1010"
console.log(num.toString(8));                     // "12"
console.log(num.toString(10));                    // "10"
console.log(num.toString(16));                    // "a"

除了继承的要领，NUmber范例还供应了一些用于将数值花样化为字符串的要领。
- toFixed() 依据指定的小数位返回数值的字符串示意。
  - 超越位数的会举行摄取，舍入划定规矩因浏览器而异，IE8及之前不能准确舍入的范围在{(-0.94,-0.5],[0.5,0.94)])},在这个范围内，IE会返回0，而不是-1或1，IE9修复了这个题目。
  - 规范完成的范例，toFixed() 尅示意带有0到20个小数位的数值，有些浏览器可以完成更多
- toExponential() 返回以指数示意法（也称e示意法）示意的数值的字符串情势。一样吸收一个参数，制订输出效果的小数位
```
var num = 10;
console.log(num.toExponentail(1));                // "1.0e+1"
```
- toPrecision() 这个要领会返回一个适宜的表达体式格局返回牢固大小（fixed）花样，也可以返回指数（exponential）花样
```
var num = 99;
console.log(num.toPrecision(1));                 // "1e+2"
console.log(num.toPrecision(2));                 // "99"
console.log(num.toPrecision(3));                 // "99.0"
```
一样，我们不发起直接实例化Number范例，缘由与建立Boolean对象一样

var numberObject = new Number(10);
var numberValue = 10;
console.log(typeof numberObject);        // "object"
console.log(typeof numberValue);         // "number"
console.log(numberObject instanceof Number);         // true
console.log(numberValue instanceof Number);          // false

String范例

继承的要领 valueOf() toLocaleString() toString() 都返回字符串所示意你的基础字符串值
String范例每一个实例都有一个length属性，示意字符串中包含若干个字符。纵然字符串中包含双字节字符串（不是占一个字节的ASCII字符），每一个字符也依然算一个字符。

var stringValue = "hello world";
console.log(stringValue.length);         // "11"

字符要领

两个用于接见字符串中特定字符的要领是 charAt() charCodeAt() 都吸收一个参数，基于0的字符位置。
charAt() 要领以单字符字符串的情势返回给定位置的谁人字符（ECMAScript中没有字符范例）

var stringValue = "hello world";
console.log(stringValue.charAt(1));     // "e"

charCodeAt() 返回字符编码

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

ECMAscript还定义了方括号接见字符的要领 IE7及之前的版本会返回undefined值

var stringValue = "hello world";
console.log(stringValue[1]);     // "e"

字符串的操纵要领

concat() 用于将一个或多个字符串拼接起来，返回拼接获得的新字符串，可以吸收恣意多个参数。虽然concat()完成了拼接要领，但实践中更多照样运用加号操纵符（+），简朴易行。

var stringValue = "hello ";
var result1 = stringValue.concat("world");     // "hello world"
var result2 = stringValue.concat("world", "!");     // "hello world!"
console.log(stringValue);                     // "hello

ECMAscript还供应了三个基于子字符串建立新字符串的要领 slice() substr() substring()

这个三个要领都邑返回被操纵符字符串的一个子字符串，而且也都吸收一个或两个参数。第一个参数制订字符串的最先位置，第二个（可选）示意子字符串到哪里完毕
三个要领都不会修正字符串自身的值——它们只是返回一个基础范例的字符串值，关于原始字符串没有任何影响
slice() substring() 的第二个参数制订的是字符串末了一个字符后的位置
substr() 的第二个参数制订的则是返回的字符个数

var stringValue = "hello world";
console.log(stringValue.slice(3));       // "lo world"
console.log(stringValue.substring(3));   // "lo world"
console.log(stringValue.substr(3));      // "lo world"

// substr() 要领第二个参数制订是要返回的字符个数
// 而slice()  substring() 指定的是完毕位置 
// "world"中的o处于位置7，因而效果中不包含o
console.log(stringValue.slice(3, 7));       // "lo w"
console.log(stringValue.substring(3, 7));   // "lo w"
console.log(stringValue.substr(3, 7));      // "lo worl"

在参数是负值的情况下，它们的行动就不尽雷同了

var stringValue = "hello world";

// slice() 会将传入的负值与字符串的长度相加
// substring() 会将传入的负值转换为0
// substr() 第一个参数假如是负值会加上字符串长度，第二个参数假如是负值，就会转换为0
console.log(stringValue.slice(-3));       // "rld"
console.log(stringValue.substring(-3));   // "hello world"
console.log(stringValue.substr(-3));      // "rld" 

console.log(stringValue.slice(3, -4));       // "lo w"
// 这里实际上相当于substring(3, 0)，而这个要领会将较小的参数作为最先位置
console.log(stringValue.substring(3, -4));   // "hel"
console.log(stringValue.substr(3, -4));      // ""

字符串的位置要领

indexOf() lastIndexOf() 从一个字符串搜刮给定的字符串，然后返回字符串的位置（没有找到就返回-1）。lastIndexOf() 从末端向前搜刮
两个要领都可以吸收第二个参数，示意从字符串中的哪一个位置最先搜刮。indexOf() 会疏忽置顶位置之前的向后搜刮，而lastIndexOf() 则相反

var stringValue = "hello world";
console.log(stringValue.indexOf("o"));       // 4
console.log(stringValue.lastIndexOf("o"));   // 7

console.log(stringValue.indexOf("o", 6));       // 7
console.log(stringValue.lastIndexOf("o", 6));   // 4

在运用第二个参数的情况下，可以经由过程轮回挪用indexOf()或lastIndexOf()来找到一切婚配的子字符串

var stringValue = "Lorem ipsum dolor sit amet, consectetur adipisicing elit";
var positions = new Array();
var pos = stringValue.indexOf("e");

while(pos > -1) {
  positions.push(pos);
  pos = stringValue.indexOf("e", pos + 1);
}

console.log(posisionts);                 // [3, 24, 32, 35, 52]

trim() 要领

ECMAScript为一切字符串定义了trim()要领。建立一个字符串的副本，删除前置及后缀的一切空格，然后返回效果
IE9+, Firefox3.5+, Safari5+, Opera10.5+, Chrome 8+ 还支撑trimLeft() trimRight()

var str = "    hello world     "     
str.trim();                           // "hello world"
console.log(str);                     // "    hello world     "

字符串大小写转换要领

toLowerCase(), toUpperCase() 是两个典范要领，自创自java.lang.String的同名要领
toLocaleLowerCase(), toLocaleUpperCase() 要领则是针对特定区域的完成。部分区域(包含简体中文)，和上面两个要领获得的值雷同，但少数言语（如土耳其语）会为Unicode大小写转换运用迥殊的划定规矩，这时候就必需运用针对区域的要领来保证完成的准确的转换

var stringValue = "hello world";
console.log(stringValue.toLocaleUpperCase());                 // "HELLO WORLD"
console.log(stringValue.toUpperCase());                       // "HELLO WORLD"
console.log(stringValue.toLocaleLowerCase());                 // "hello world"
console.log(stringValue.toLowerCase());                       // "hello world"

字符串的情势婚配要领

match() 在字符串上挪用这个要领，本质上与挪用RegExp的exec()要领雷同。只吸收一个参数，要么是一个正则表达式，要么是一个RegExp对象

var txt = "cat, bat, sat, fat";
var pattern = /.at/;

// 与pattern.exec()雷同
var matches = txt.match(pattern);
console.log(matches.index);                  // 0
console.log(matches[0]);                     // "cat"
console.log(matches.lastIndex);              // 0

另一个用于查找情势的要领是search() 唯一的参数与match()雷同，返回字符串中第一个婚配项的索引；假如没有返回-1

var txt = "cat, bat, sat, fat";
var pos = txt.search(/at/);
console.log(pos);                  // 1

为了简化替代子字符串的操纵，ECMAscript供应了replace()要领，两个参数，一个是RegExp对象或许一个字符串（这个字符串不会被转成正则表达式），第二个参数可以是一个字符串或许一个函数。假如第一个参数是字符串，那末只会替代掉第一个子字符串。要想替代一切子字符串，唯一的方法就是供应一个正则表达式，而起要制订全局标识（g）
```
var txt = "cat, bat, sat,  fat";
var result = txt.replace("at", "ond");             // "cound, bat, sat, fat"
result = txt.replace(/at/g, "ond");                // "cond, bond, sond, fond"
```
- 第二个参数是字符串，还可以运用一些迥殊子重复序列，将正则表达式操纵获得的值插进去到效果字符串中。

| 字符序列 | 替代文本 |
| ——– | ———————————————————————————————————– |
| $$ | $ |
| $& | 婚配全部情势的子字符串。与RegExp.lastMatch的值雷同 |
| $’ | 婚配子字符串之前的字符串。与RegExp.leftContext的值雷同 |
| $` | 婚配子字符串今后的字符串。与RegExp.rightContext的值雷同 |
| $n | 婚配第n个捕捉组的子字符串，个中n即是0~9。$0,$1…$9 。假如正则表达式中没有定义捕捉组，则运用空字符串 |
| $nn | 婚配第nn个捕捉组的子字符串，个中n即是01~99。$01,$02…$99 。假如正则表达式中没有定义捕捉组，则运用空字符串 |

var txt = "cat, bat, sat, fat";
result = txt.replace(/(.at)/g, "word ($1)");         
// word (cat), word (bat), word (sat), word (fat)

第二个参数是函数。在只要一个婚配项（即与情势婚配的字符串）的情况下，会向这个函数通报三个参数：情势的婚配项（定义了多个捕捉组，这里就会有多个）、情势婚配项在字符串中的位置和原始字符串。

function htmlEscape(text) {
  return text.replace(/[<>"&]/g, function(match, pos, orginalText) {
    switch (match) {
      case "<":
        return "&lt;";
      case ">":
        return "&gt;";
      case "&":
        return "&amp;";
      case "\"":
        return "&quot;";
    }
  });
}
console.log(htmlEscape("<p class=\"greeting\">Hello world!</p>"))
//  &lt;p class=&quot;greeting&quot;&gt;Hello world!&lt;/p&gt;

split() 要领可以基于指定的分开符将一个字符串分割成多个子字符串，并将效果放在一个数组中。分开符可以是字符串，也可以是一个RegExp对象（这个要领不会将字符串算作正则表达式）。split() 要领可以吸收可选的第二个参数，用于指定数组的大小，以便确保返回的数组不会凌驾既定大小。

var colorText = "red,blue,green,yellow";
var colors1 = colorText.split(",");                  // ["red", "blue", "green", "yellow"]
var colors2 = colorText.split(",", 2);               // ["red", "blue"]

// 须要注重的是，返回效果第一项和末了一项是空字符串
// /[^\,]+/ 示意婚配逗号之前的单词 不包含逗号 婚配项就是
// "red" "blue" “green" "yellow"
// "red"之前和“yellow"今后没有字符，所以第一项和末了一项是空字符串
var colors3 = colorText.split(/[^\,]+/);             // ["", ",", ",", ",", ""]

localeCompare() 要领

这个要领比较两个字符串，并返回以下值中的一个：
- 假如字符串在字母表中应当排在字符串参数之前，则返回一个负数，（大多数情况下是-1，详细的值要视完成而定）
- 假如字符串即是字符串参数，则返回0
- 假如字符串在字母表中应当排在字符串参数今后，则返回一个正数（大多数情况下是1，详细的值一样要视完成而定）。

var stringValue = "yellow";
console.log(stringValue.localeCompare("brick"));                        // 1
console.log(stringValue.localeCompare("yellow"));                       // 0
console.log(stringValue.localeCompare("zoo"));                          // -1

再次强调，由于localeCompared() 返回的数值取决于完成，所以最好是像下面所示

function determineOrder(value) {
  var result = stringValue.localeCompare(value);
  if (result < 0) {
    console.log("The string 'yellow' comes before the string '" + value + "'.");
  } else if (result > 0) {
    console.log("The string 'yellow' comes after the string '" + value + "'.");
  } else {
    console.log("The string 'yellow' is equal to the string '" + value + "'.");
  }
}

determineOrder("brick");
determineOrder("yellow");
determineOrder("zoo");

fromCharCode() 要领

这个要领的使命是吸收一或多个字符编码，然后将它们转换成一个字符串

console.log(String.fromCharCode(104, 101, 108, 108, 111));    // "hello"

HTML 要领

初期的web浏览器完成了一些特地用于简化HTML花样化使命的要领，不发起运用

单体内置对象

ECMA-262对内置对象的定义：“由ECMAScript完成供应的、不依赖于宿主环境的对象，这些对象在ECMAScript顺序实行之前就已存在了。”意义是开发者没必要显式的实例化内置对象，由于它们已实例化了。

Global 对象

ECMAScript中的Global对象在某种意义上是作为一个最终的“兜底儿对象”。不属于任何其他对象的属性和要领，终究都是它的属性和要领。
一切在全局作用域中定义的属性和函数都是Global对象的属性。
诸如 isNaN(), isFinite(), parseInt(), parseFloat() 实际上全都是Global对象的要领。除此以外，Global还包含其他一些要领。

URI编码要领

Gloabal对象的encodeURI() 和 encodeURIComponent() 要领可以对URI(Uniform Resource Identifiers, 通用资本标识符)举行编码，以便发送给浏览器。有用的URI中不能包含某些字符，比方空格。而这两个URI编码要领便可以对URI举行编码，它们迥殊的UTF-8编码替代一切无效的字符，从而让浏览器可以吸收和明白。
encodeURI() 重要用于全部URI（比方 http://www.wrox.com/illegal value.htm) 不会对自身属性URI的迥殊字符举行编码，比方冒号、正斜杠、问好和井字号
encodeURIComponent() 重要用于对URI中的某一段（比方前面URI中的illegal value.htm）举行编码。会对发明的任何非规范字符举行编码。

var uri = "http://www.wrox.com/illegal value.htm#start";
encodeURI(rui);                  // "http://www.wrox.com/illegal%20value.htm#start"
encodeURIComponent(rui);        // "http%3A%2F%2Fwww.wrox.com%2Fillegal%20value.htm%23start"

// encodeURI 只对空格编码
// encodeURIComponents 一切非字母数字字符

与encodeURI() 和 encodeURIComponent() 要领对应的是 decodeURI() decodeURIComponent()
dencodeURI() 只能对encodeURI()替代的字符举行编码。%20替代成一个空格，但不会对%23（#）作处置惩罚
decodeURIComponent() 能解码一切字符

eval() 要领

末了一个，也许也是ECMAScript中最壮大的要领。它只吸收一个参数，即，要实行的的ECMAScript（或 JavaScript）字符串
eval() 中建立的任何变量或函数都不会被提拔，由于在剖析代码的时刻，它们被包含在一个字符串中，只在eval() 实行的时刻建立

eval("var msg = 'hello world';");
console.log(msg);                       // hello world

eval("function sayHi() { alert('hi'); }");
sayHi();

严厉情势下，在外部接见不到eval()中建立的任何变量或函数，因而前面两个例子都邑致使毛病。
在严厉情势下，为eval赋值也会致使毛病

"use strict"
eval = "hi";           // causes error

运用eval()时必需极为郑重，迥殊着实用它实行用户输入数据的情况下。不然可以会有歹意用户输入要挟你的站点或运用顺序平安的代码（即所谓的代码注入）

Global对象的属性

有些属性之前引见过，诸如 undefined, NaN, Infinity 都是Global对象的属性。另外一切原生援用范例的组织函数，像Object Function也都是Global对象的属性

属性	申明
undefined	迥殊值undefined
NaN	迥殊值NaN
Infinity	迥殊值Infinity
object	组织函数object
Array	组织函数Array
Function	组织函数Function
Boolean	组织函数Boolean
String	组织函数String
Number	组织函数Number
Date	组织函数Date
RegExp	组织函数RegExp
Error	组织函数Error
EvalError	组织函数RegExp
RangeError	组织函数RangeError
ReferenceError	组织函数ReferenceError
SyntaxError	组织函数SyntaxError
TypeError	组织函数TypeError
URIError	组织函数URIError

ECMAScript 5 明白进制给undefined, NaN 和 Infinity 赋值，如许做纵然在非严厉情势下也会致使毛病。

window对象

ECMAScript 虽然没有指出怎样直接接见global对象，但Web浏览器都是将这个全局对象作为window对象的一部分加以完成。因而全局作用域中声明的一切变量和函数，就都成为了window对象的属性
另一种获得Global对象的要领是运用this

var global = function() {
  return this;
}();

Math 对象

与JavaScript直接编写的盘算功用比拟，Math对象供应的盘算功用实行起来要快的多。
Math对象的属性

属性	申明
Math.E	自然对数的底数，即常量e的值
Math.LN10	10的自然对数
Math.LN2	2的自然对数
Math.LOG2E	以2为底e的对数
Math.LOG10E	以10为底e的对数
Math.PI	π的值
Math.SQRT1_2	1/2的平方根
Math.SQRT2	2的平方根

min() max() 要领用于肯定一组数值中的最小值和最大值。可以吸收恣意个数值参数。
```
var max = Math.max(3, 54, 32, 16);  // 54
var min = Math.min(3, 54, 32, 16);  // 3
```
- 找到数组中的最大或最小值，可以像下面如许运用
- 这个技能的关键是把Math作为apply()的第一个参数，从而准确的设置this值，然后可以将任何数组作为第二个参数（作为arguments对象）
```
var values = [1, 2, 3, 5, 6, 7, 8];
// 这个写法相当于 把数组的项作为一个个数值参数传给函数
// Math.max(1, 2, 3, 5, 6, 7, 8)
var max = Math.max.apply(Math, values);
var min = Math.min.apply(Math, values);
```
舍入要领将小数值舍入为整数的几个要领：Math.ceil(), Math.floor(), Math.round()
- Math.ceil() 实行向上舍入，即它老是将数值向上舍入为最接近的整数
- Math.floor() 实行向下舍入，即它老是将数值向下舍入为最接近的整数
- Math.round() 实行规范舍入，即它老是将数值四舍五入为最接近的整数
random() 返回大于即是0小于1的一个随机数

// 随机天生一个1到10之间的数值
var num = Math.floor(Math.random() * 10 + 1);

function selectFrom(lowerValue, upperValue) {
  var choices = upperValue - lowerValue + 1;
  return Math.floor(Math.random() * choices + lowerValue);
}
var num = selectFrom(2, 10);                   // 介于2和10之间（包含2和10）的一个数值

// 应用这个函数可以轻易的从数组中随机掏出一项
var colors = ["red", "green", "blue", "yellow", "black", "purple", "brown"]
var color = colors[selectFrom(0, colors.length - 1)];

其他要领

要领	申明
Math.abs(num)	返回num的绝对值
Math.exp(num)	返回Math.E的num次幂
Math.log(num)	返回num的自然对数
Math.pow(num, power)	返回num的power次幂
Math.sqrt(num)	返回num的平方根
Math.acos(x)	返回x的反余弦值
Math.asin(x)	返回x的横竖弦值
Math.atan(x)	返回x的横竖切值
Math.atan2(y,x)	返回y/x的横竖切值
Math.cos(x)	返回x的余弦值
Math.sin(x)	返回x的正弦值
Math.tan(x)	返回x的正切值

    原文作者：陈思达
    原文地址: https://segmentfault.com/a/1190000019116507
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。