JavaScript高级程序设计(第4版)读书分享笔记记录
适用于刚入门前端的同志
定义函数
定义函数有两种方式:函数声明和函数表达式
大致看这两种方式没有什么区别,事实上,JavaScript
引擎在加载数据时对它们是区别对待的。JavaScript
引擎在任何代码执行之前,会先读取函数声明,并在执行上下文中生成函数定义。而函数表达式必须等到代码执行到它那一行,才会在执行上下文中生成函数定义。
函数声明式
栗子:
function sum (num1, num2) {
return num1 + num2;
}
函数提升
栗子:
console.log(sum(10, 10)); //20
function sum(num1, num2) {
return num1 + num2;
}
以上代码可以正常运行,因为函数声明会在任何代码执行之前先被读取并添加到执行上下文(函数声明提升)。
执行原理:
在执行代码时,JavaScript
引擎会先执行一遍扫描, 把发现的函数声明提升到源代码树的顶部。因此即使函数定义出现在调用它们的代码之后,引擎也会把函数声明提升
到顶部
注意:
如果把前面代码中的函数声明改为等价的函数表达式,那么执行的时候就会出错。
栗子:
// 会出错
console.log(sum(10, 10)); // // Error! function doesn't exist yet
let sum = function(num1, num2) {
return num1 + num2;
};
函数表达式
函数表达式看起来就像一个普通的变量定义和赋值,即创建一个函数再把它赋值给一个变量.
这样创建的函数叫作
匿名函数(anonymous funtion
),因为
function
关键字后面没有标识符
栗子:
let functionName = function(arg0, arg1, arg2) {
// 函数体
};
// or
let functionName;
functionName = function(arg0, arg1, arg2) {
// 函数体
};
箭头函数
ECMAScript 6
新增了使用胖箭头(
=>
)语法定义函数表达式的能力。
很大程度上,箭头函数实例 化的函数对象与正式的函数表达式创建的函数对象行为是相同的。任何可以使用函数表达式的地方,都可以使用箭头函数
栗子:
let arrowSum = (a, b) => {
return a + b;
};
console.log(arrowSum(5, 8)); // 13
如果只有一个参数,那也可以不用括号。只有没有参数,或者多个参数的情况下,才需要使用括号。
注意:
箭头函数虽然语法简洁,但也有很多场合不适用。箭头函数不能使用 arguments
、super 和
new.target,也不能用作构造函数。此外,箭头函数也没有 prototype 属性。
理解参数
读取函数参数可以用到命名参数和arguments对象。
arguments 对象是一个类数组对象,因此可以使用中括号语法访问其中的 元素(第一个参数是 arguments[0])。而要确定传进来多少个参数,可以访问arguments.length 属性。
栗子:
function sayHi(name, message) {
console.log("Hello " + name + ", " + message);
console.log(arguments.length);
}
//等价于
function sayHi() {
console.log("Hello " + arguments[0] + ", " + arguments[1]);
console.log(arguments.length);
}
sayHi('Tom','welcome To My CSDN'); // 2
还有一个必须理解的重要方面,那就是
arguments
对象可以跟命名参数一起使用。
栗子:
function doAdd(num1, num2) {
if (arguments.length === 1) {
console.log(num1 + 10);
} else if (arguments.length === 2) {
console.log(arguments[0] + num2);
}
}
arguments
arguments 对象其实还有一个
callee
属性,是一个指向
arguments
对象所在函数的指针。
使用
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); //arguments.callee代表factorial
}
}
箭头函数中的参数
上面提到过箭头函数,如果函数是使用箭头语法定义的,那么传给函数的参数将不能使用 arguments 关键字访问,而只能通过定义的命名参数访问。
默认参数值
ECMAScript 6 支持显式定义默认参数了。
栗子:
function makeKing(name = 'Henry') {
return `King ${name} VIII`;
}
console.log(makeKing('Louis')); // 'King Louis VIII'
console.log(makeKing()); // 'King Henry VIII'
//箭头函数也可
let makeKing = (name = 'Henry') => `King ${name}`;
console.log(makeKing()); // King Henry
扩展参数
在
ECMAScript 6
中,可以通过扩展操作符极为简洁地实现参数扩展。
因为数组的长度已知,所以在使用扩展操作符传参的时候,并不妨碍在其前面或后面再传其他的值, 包括使用扩展操作符传其他参数(普通传参可以和扩展传参一起使用)
栗子:
let values = [1, 2, 3, 4];
function getSum() {
let sum = 0;
for (let i = 0; i < arguments.length; ++i) {
sum += arguments[i];
}
return sum;
}
console.log(getSum(...values)); // 10
//等价于 getSum(1,2,3,4)
console.log(getSum(-1, ...values)); // 9
//等价于 getSum(-1,1,2,3,4)
console.log(getSum(...values, 5)); // 15
console.log(getSum(-1, ...values, 5)); // 14
console.log(getSum(...values, ...[5,6,7])); // 28
//等价于 getSum(1,2,3,4,5,6,7)
函数内部
this
- this,它在标准函数和箭头函数中有不同的行为。(重点)
- 在标准函数中,this 引用的是把函数当成方法调用的上下文对象,这时候通常称其为 this 值(在网页的全局上下文中调用函数时,this 指向 windows)(谁调用这个函数,this就指向谁)。
- 这个 this 到底引用哪个对象必须到函数被调用时才能确定
栗子:
window.color = 'red';
let o = {
color: 'blue'
};
function sayColor() {
console.log(this.color);
}
sayColor(); // 'red'
o.sayColor = sayColor;
o.sayColor(); // 'blue'
- 在箭头函数中,this引用的是定义箭头函数的上下文。(箭头函数在哪里定义的,this就指向谁)
栗子:
扫描二维码关注公众号,回复:
15527058 查看本文章
this
引用的都是
window
对象,因为这个箭头函数是在
window
上下文中定义的。
window.color = 'red';
let o = {
color: 'blue'
};
let sayColor = () => console.log(this.color);
sayColor(); // 'red'
o.sayColor = sayColor;
o.sayColor(); // 'red'
caller
ECMAScript 5
也会给函数对象上添加一个属性:
caller。这个属性引用的是调用当前函数的函数
栗子:
function outer() {
inner();
}
function inner() {
console.log(inner.caller);
}
outer();
//前面有说过 arguments.callee 是指向arguments所在的函数,所以可以改为
function outer() {
inner();
}
function inner() {
console.log(arguments.calle.caller);
}
outer();
打印结果:
函数属性与方法
属性
前面提到过,ECMAScript
中的函数是对象,因此有属性和方法。每个函数都有两个属性:
length和 prototype
。
length
属性保存函数定义的命名参数的个数
栗子:
function sayName(name) {
console.log(name);
}
function sum(num1, num2) {
return num1 + num2;
}
function sayHi() {
console.log("hi");
}
console.log(sayName.length); // 1
console.log(sum.length); // 2
console.log(sayHi.length); // 0
方法
- 函数还有两个方法:apply()和 call()。
- 这两个方法都会以指定的 this 值来调用函数,即会设置调用函数时函数体内 this 对象的值。
-
apply() 和 call() 真正强大的地方并不是给函数传参,而是控制函数调用上下文即函数体内 this值的能力。
apply()
方法接收两个参数:函数内
this
的值和一个参数数组
栗子:
window.color = 'red';
let o = {
color: 'blue'
};
function sayColor(a,b,c) {
console.log(this.color,a,b,c);
}
sayColor(1,2,3); // red,1,2,3
sayColor.apply(this,[2,3,4]); // red,2,3,4
sayColor.apply(window,[2,3,4]); // red ,2,3,4
sayColor.apply(o,[2,3,4]); // blue,2,3,4
call()方法:第一个参数函数内 this 的值,而剩下的要传给被调用函数的参数则是逐个传递的。
栗子:
window.color = 'red';
let o = {
color: 'blue'
};
function sayColor(a,b,c) {
console.log(this.color,a,b,c);
}
sayColor(1,2,3); // red,1,2,3
sayColor.call(this,2,3,4); // red,2,3,4
sayColor.call(window,2,3,4); // red ,2,3,4
//而在使用 sayColor.call(o)把函数的执行上下文即 this 切换为对象 o 之后,结果就变成了示"blue"了。
sayColor.call(o,2,3,4)// bule,2,3,4
总结:
1. 区别
- call传递的参数是序列1,2,3
- apply传递的参数是集合型[1,2,3]
- call和apply是替换前面函数内部的this指针以及传递参数。
- 功能:可以自动执行前面的函数
- 都有两个参数:a. 替换的对象 b. 传递的值
bind()
ECMAScript 5 出于同样的目的定义了一个新方法:
bind()
。
bind()
方法会创建一个新的函数实例, 其 this
值会被
绑定
到传给
bind()
的对象。
栗子:
window.color = 'red';
var o = {
color: 'blue'
};
function sayColor() {
console.log(this.color);
}
let objectSayColor = sayColor.bind(o);
objectSayColor(); // blue