es6 笔记-普通函数和箭头函数
es6 -笔记
普通函数和箭头函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//"use strict"
// 开启严格模式 严格模式下 独立调用的函数 中this指向undefined
//定义函数
//1.普通的函数被调用
function foo(){
console.log('foo',this);
}
foo() //this指向widow
//2.函数定义在对象中
//对象内部方法的this指向调用这些方法的对象，也就是谁调用就指向谁。
var obj = {
name:"qq",
bar:function(){
console.log('bar',this);
}
}
// 将对象赋值给变量单独调用
var zz = obj.bar
zz() //指向widow
</script>
</body>
</html>
隐式绑定this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 隐式绑定
function foo(){
console.log('foo',this);
}
var obj ={
bar:foo
}
obj.bar()
</script>
</body>
</html>
call
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// call
var obj ={
name:"www"
}
function foo(){
console.log("foo",this);
}
// 执行函数 ，并且函数中this指向obj对象
// obj.foo = foo
// obj.foo()
// 执行函数，并且强制this就是obj对象
foo.call(obj)
foo.call(111)
foo.call("abc")
</script>
</body>
</html>
call /apply区别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 通过call /apply 绑定this对象
//call /apply
function foo(name,age,height){
console.log("foo",this);
console.log(name,age,height);
}
// foo("qww",12,1.0)
// apply
// 第一个参数：绑定this
// 第二个参数：传入的实参 以数组的形式
foo.apply("apply",["hehe",12,11])
// call
// 第一个参数 绑定this
// 参数列表
foo.call("call","11",11,11)
</script>
</body>
</html>
箭头函数
- 箭头函数是es6之后的一种编写函数的方法
- 箭头函数不会绑定this, arguments属性
- 箭头函数不会作为构造函数来使用可以通过class (不能和new一起来使用，回抛出错误)
实例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function foo(){}
var foo2 = function (){
//console.log(name,age);
console.log(arguments);
}
foo2()
// 箭头函数
// 箭头函数是es6之后的一种编写函数的方法
// 箭头函数不会绑定this, arguments属性
// 箭头函数不会作为构造函数来使用可以通过class (不能和new一起来使用，回抛出错误)
//
var foo3=(name,age)=>{
console.log(name,age);
}
//箭头函数的练习
var names=["a","b","c"]
names.forEach((item,index,arr)=>{
console.log(item,index,arr);
})
setTimeout(()=>{
console.log('11');
},3000)
</script>
</body>
</html>
箭头函数的简写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var names = ["a","b","c"]
var nums = [20,12,34]
//优化1 如果箭头函数只有一个参数，那么（）可以省略
names.forEach(item=>{
console.log(item);
})
var newNums = nums.filter(item=>{
return item%2===0
})
//console.log('rew',newNums);
// 2如果函数体只有一行执行代码那么{}可以省略
names.forEach(item=> console.log(item));
// 一行代码不能写return关键字
// 3只有一行代码时，这行代码的表达式结果会作为函数的返回值默认返回
var newNums = nums.filter(item=>{
return item%2===0
})
// 4简写
var newNums=nums.filter(item=> item%2===0)
//5 如果默认返回值是一个对象，那么这个对象必须加()
var arrfn = ()=>({name:"sss"})
</script>
</body>
</html>
箭头函数中this的指向
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//箭头函数中没有this 但是会在上层作用域中寻找 如果没有则继续往上查找直到找到window
var bar = ()=>{
//console.log('this',this);
}
bar()
// 通过apply调用时，也没有this
// bar().apply("bbb")
// 3.this的查找规则
var obj ={
name:"obj",
foo:function(){
var bar = ()=>{
// 当前作用域没有，foo是一个普通函数 有因为obj.foo指向obj
console.log('bar',this); //this指向obj
}
return bar
}
}
var fn = obj.foo()
fn.apply("bbb")
// 3.this的查找规则
var obj ={
name:"obj",
foo:()=>{
var bar = ()=>{
// 当前作用域没有，foo里面也没有 obj是一个对象压根不是一个作用域，所以this指向window
console.log('bar1',this);
}
return bar
}
}
var fn = obj.foo()
fn.apply("bbb")
</script>
</body>
</html>
bind
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 希望一个函数 总是显示的绑定到一个对象上
// 使用bind方法 创建一个新的绑定函数
//bind与call的唯一区别就是call直接改变函数test的指向，
//而bind是生成了一个新函数，该函数改变了指向。
function foo(){
console.log("foo",this);
}
var obj = {name:"www"}
//var bar = foo
//bar()//指向window
var bar=foo.bind(obj)
bar()
</script>
</body>
</html>
new
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//javascript 中的函数可以当作一个类的构造函数来使用，也就是new关键字
// 创建一个object对象
//通过设置原型的方式，将object的原型设置为new的构造函数
//执行构造函数，并将this的指向改为创建的object对象
//返回当前对象
function foo(){
this.name="111"
console.log('foo',this);
}
new foo()
</script>
</body>
</html>