速写属性
var _name="abc";
var _age=12;
var obj={
_name,
_age,
}
速写方法
//以前
var obj={
name:"zhangsan",
sayHello:function(){
console.log(this.name);
}
}
//现在
var obj={
name:"zhangsan",
sayHello(){
console.log(this.name);
}
}
箭头函数
//原来
var obj={
name:"zhangsan",
sayHello:function(){
setInterval(function () {
console.log(this.name); //this 指向有问题
},3000);
},
};
//箭头函数
var obj={
name:"zhangsan",
sayHello(){
setInterval( ()=> { //箭头函数改变this指向
console.log(this.name);
},3000);
},
};
举例求和函数
var num=function (a,b){
return a+b;
}
var num1 = (a,b) => a+b;
console.log(num1(3,4));
7
模板字符串和普通函数的区别
外形不一样
普通函数:
function fun1(){
}
箭头函数
var fun1=()=>{
}
1.箭头函数是匿名函数,简化函数定义的形式,
2.箭头函数不可以做构造函数创建对象,不能用new
3.箭头函数没有原型属性
4.由于箭头函数不绑定this, 它会捕获其所在(即定义的位置)上下文的this值, 作为自己的this值,
所以 call() / apply() / bind() 方法对于箭头函数来说只是传入参数,对它的 this 毫无影响。
考虑到 this 是词法层面上的,严格模式中与 this 相关的规则都将被忽略
//this的指向是obj
var obj={
name:"lillian",
sayHello(){
setInterval(()=>{
console.log(this.name); //lillian
},1000)
}
}
//打印的不是obj的name
this的指向有问题,这里指向window
var obj={
name:"lillian",
sayHello(){
setInterval( function(){
console.log(this.name); //打印的不是obj的name
},1000)
}
}
undefined
模板字符串
var str=`asdffgg`;
//特点: 随意换行 显示也换行
var name="成哥";
var age=14;
console.log(`姓名:${name},年龄:${age}"`);
VM65:4 姓名:成哥,年龄:14" //相当于在拼接
对象声明新加了,可用class
原来用构造函数
function Person(name,age){
this.name=name;
this.age=age;
}
Person.prototype.sayHello=function(){
return ("my name is "+this.name+",my age is "+this.age);
}
var person=new Person("LILLIAN",20);
console.log(person.sayHello());
用class
class Person{
constructor(name,age){
this.name=name;
this.age=age;
}
sayHello(){
return ("my name is "+this.name+",my age is "+this.age);
}
}
var person=new Person("LILLIAN",20);
console.log(person.sayHello());
let 和 const
是ES6新增的,为了弥补var的缺点
1.变量作用域:变量再什么范围內是可用的。
{
var name="ailian";
console.log(name);} //var 没有块级作用域 所以{}有无没有不同
//ailian
console.log(name);
//ailian
2. 没有块级作用域引起的问题.(var 没有块级作用域)
比如 :if 和 for循环
if(true){
var name="ailian";
}
console.log(name); //ailian
for循环块级
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
</body>
<script>
var btns=document.getElementsByTagName("button");
for(var i=0;i<btns.length;i++){
btns[i].addEventListener("click",function(){
console.log("第"+i+"个按钮被点击");
})
}
</script>
用let来改善
var btns=document.getElementsByTagName("button");
for(let i=0;i<btns.length;i++){
btns[i].addEventListener("click",function(){ //用let定义 有块级作用域 i 独立
console.log("第"+i+"个按钮被点击");
})
}
方法2
一次执行函数(闭包)
为什么闭包可以解决for循环的块级?
因为function是一个作用域
var btns=document.getElementsByTagName("button");
for(var i=0;i<btns.length;i++){
(function(i){
btns[i].addEventListener("click",function(){
console.log("第"+i+"个按钮被点击");
})
}(i))
} //为什么闭包可以解决for循环的块级?因为function是一个作用域
const
注意点1:用const修饰的标识符,一旦被赋值,就不能被改变。
注意点2:在使用const定义标识符,必须要赋值(与var let不同)
注意点3:常量的含义是指向的对象不能被修改,但是属性可以被修改
const obj={
name:"123",
age:17
}
const obj={}
Uncaught SyntaxError: Identifier 'obj' has already been declared
obj.age=10
10