JS-运算符与语句

1、箭头函数

箭头函数提供了一种更简单的函数书写方式

//普通函数
var fn=function(a){
return a
}
fn(10)

//箭头函数
var fn=(a,b)=>a*b
fn(10,20)

如果箭头函数只有一个参数时可以不用括号

var fn=a=>a
fn(100)

当箭头函数函数体有多行语句，用 {} 包裹起来，表示代码块，当只有一行语句，并且需要返回结果时，可以省略 {} , 结果会自动返回

var fn=(a,b)=>{
var tree=a*b
return tree
}
fn(2,5)

当箭头函数要返回对象的时候，为了区分于代码块，要用 () 将对象包裹起来

var fn=(name,age)=>({name:name,age:age})
fn("YU",18)  //{name:"YU",age:18}

关于箭头函数的this的指向问题

this是离它最近的嵌套的 function/方法这个函数的调用者，直到顶层都没有就是window

var fn=(a)=>{
console.log(this,99999)  //this是window
return a
}


var obj={
name:"YU",
fm:function(){
var fm1=(x)=>{
console.log(this,8888)  //this为obj  距离最近的函数体的调用者
return x
}
fm1()
}
}
obj.fm()


var obj={
name: "YU",
fn: function(){
console.log(this,88)  //this为obj
},
fm:()=>{
console.log(this,99)  //this为全局window对象
}
}
obj.fn()
obj.fm()

箭头函数这样设计this的目的 

var obj={
name:"李华",
luck：function(){
var good=()=>{
console.log(this.name+"中奖了")  //李华中奖了
}
good()
}}
obj.luck()

箭头函数不能用做创建对象

var fn=(a)=>{
this.a=a
}
var f1=new fn(10)  //Uncaught TypeError: fn is not a constructor

当函数传入多余的实参用剩余运算符全部传入

var fn=(a,)=>{
console.log(a)  //11
console.log(x1)  //[233,44,5,2]
console.log(arguments) //Uncaught ReferenceError: arguments is not defined
}
fn(11,223,44,5,2)

2、模块化

ES6 的模块化分为导出（export） 与导入（import）两个模块

//导出字符串
export default "aaa";

//导出数字
export default 123;

//导出布尔值
export default true;

//导出数组
export default [11,3,2,3];

//导出对象
var obj={
name:"李华",
age:20
}
export default obj;

//导出函数
var fn=function() {
console.log("菜根谭");
return 100;
}
export default fn;

//导出类
class People{
constructor(){
this.a=100;
}
say(){
console.log("hello,world");
}
}
export default People;

导入import与from关联使用，此时script标签的type必须设置为module

单例模式：多次重复执行同一句 import 语句，那么只会执行一次，而不会执行多次。import 同一模块，声明不同接口引用，会声明对应变量，但只执行一次 import

<script type="module">
import Grammer from "./src/thanks.js";
var g=new Grammer();
g.say();
</script>

3、类（class）

了解类之前先了解js是什么：js是基于面向对象设计的单线程的静态脚本语言

//声明类
class Person{				
}
let p1=new Person()
console.log(p1)
			
//匿名类
var fn=class{				
}
var f1=new fn()
console.log(f1)

 js没有类 是原型的思想设计的类，但是学习和使用这个技术时，心中要用类的思想学习

class People{
constructor(x,y){
this.x=x
this.z=y
}
age=18
say(){
console.log(this.age,111)  //18,111
}
static life="well"
static play(a,b){
console.log(a+b)  //3
}
}
var p=new People(11,22)
p.say()
People.play(1,2)
console.log(p)  //

 类的继承

（1）解决代码的复用

（2）使用extends关键字实现继承

（3）子类可以继承父类中所有的方法和属性

（4）子类只能继承一个父类（单继承），一个父类可以有多个子类

（5）子类的构造方法中必须有super()来指定调用父类的构造方法，并且位于子类构造方法中的第一行

（6）子类中如果有与父类相同的方法和属性，将会优先使用子类的（覆盖）

通俗的说就像儿子继承父亲

class Father {
            life = "bad"
            constructor(addr) {
                this.addr = addr
                this.rich = function () {
                    console.log("在" + this.addr + "有一套房")
                }
            }
            down() {
                console.log("在" + this.addr + "别人一百万")
            }
            static age = 50
        }
        var f1 = new Father("重庆")
        f1.rich()
        f1.down()
        console.log(f1)

        class Son extends Father {
            constructor(addr) {
                super(addr)
                this.age = 23
                this.money = "一万"
            }
        }
        var s1 = new Son("成都")
        console.log(s1)