学习目标
- 函数定义有几种方式？有什么区别？
- es5和es6中函数参数该怎么使用, 理解不同数据类型函数参数传值方式的不同
- 不同方式调用函数的区别
- 理解函数内部this指向的问题及如何修改this的指向
- es6新特性-箭头函数
定义函数
定义函数的方式有两种: 函数声明和函数表达式
- 函数声明
function test(arg0, arg1){
}
函数声明有一个重要特征就是函数声明提升, 就是在执行代码之前会先读取函数声明,
这就意味着可以把函数声明放到调用它的语句后面
test();
function test(){
}
- 函数表达式(匿名函数)
var test = function(arg0, arg1){
}
必须先定义才能调用
test(); // 报错
function test(){
}
函数参数
- arguments
- js中的参数在内部是用一个数组来表示的
- 在函数体内可以使用arguments对象来访问这个参数数组
- 假如你定义的函数有两个参数，在调用的时候不一定要传递两个参数，一个，三个，不传都可以
function sayHi(){
console.log(arguments);
}
sayHi(); //[Arguments] {}
sayHi(1, "zhangsan"); //[Arguments] { '0': 1, '1': 'zhangsan' }
sayHi(1, "zhangsan", true); //[Arguments] { '0': 1, '1': 'zhangsan', '2': true }
- rest
- es6新特性
- es6中不能使用arguments
- arguments是伪数组, rest是真数组
function sayHi(...args){
console.log(args);
}
sayHi(1, 2, 3); //[ 1, 2, 3 ]
- 传值方式
- 基本数据类型值传递
- 引用数据类型引用传递
调用函数方式
- 函数调用
var age = 10;
var p = {
age: 11,
say:function () {
console.log(this); //this是window
console.log(this.age); //undefined
}
}
var p1 = p.say;
p1();
- 方法调用
var age = 10;
var p = {
age: 11,
say:function () {
console.log(this); // { age: 11, say: [Function: say] } p
console.log(this.age); //11
}
}
p.say();
- 构造函数
var age = 10;
function Person(age) {
this.age = age;
this.say = function () {
console.log(this); //Person { age: 11, say: [Function] } 构造函数的实例
console.log(this.age); //11
}
}
var p1 = new Person(11);
p1.say();
- 上下文方式
// 上下文有三种调用方式，call，apply，bind
function f1() {
console.log(this);
}
// call方法的第一个参数决定了函数内部的this值，apply可以替换call
f1.call([1,2,3]); //[ 1, 2, 3 ]
f1.call({name:"test", age:11}); //{ name: 'test', age: 11 }
f1.call(1); //[Number: 1]
f1.call("abc") //[String: 'abc']
f1.call(true); //[Boolean: true]
f1.call(false); //[Boolean: false]
f1.call(undefined);// this指向window
call和apply的区别
- 都可以改变函数内部this的指向
- 传参的形式不同
函数内部this指向
调用的方式不同, this的指向不同, 一般指向我们的调用者
- 修改函数内部this的指向
call
var o = {
name: 'sn'
}
function fn(a, b){
console.log(this, a+b);
}
fn(1, 2); // this的指向是window, 结果是3
fn(o, 1, 2) // this的指向是对象o, 参数使用逗号隔开, 运行结果是3
apply
var o = {
name: 'sn'
}
function fn(a, b){
console.log(this, a+b);
}
fn(1, 2); // this的指向是window, 结果是3
fn(o, [1, 2]) // this的指向是对象o, 参数使用数组传递, 运行结果是3
bind
不会调用函数
var o = {
name: 'sn'
}
function fn(a, b){
console.log(this, a+b);
}
var f = fn.bind(o, 1, 2);
f(); // this指向对象o
call、apply、bind的异同
- 都可以修改this的指向
- call和apply会调用函数， bind不会调用函数
- 传参的方式不同
ES6新特性-箭头函数
- 定义箭头函数
(参数)=>{}
注:
如果只有1个参数, ()可以省略
如果只有1个语句, {}可以省略
- 箭头函数 vs 普通函数
- 普通函数, this指向一般指向我们的调用者, 箭头函数的this指向定义时所在的对象
- 箭头函数不可以当构建函数, 不可以new
- 不可以使用arguments, 用rest代替
