2021-4-14-es6

一. 学习内容

1.箭头函数

箭头函数简化了function的使用。没有arguments参数列表，只有剩余参数。

			var fun=(...a)=>{
				console.log(...a);
			}
			fun(13,32434,122,3);

箭头函数的this指向定义时所在的对象，不是使用时的对象。也是指向外层作用域。

  var  li={
				name:'李明',
				age:'18',
				buy:function(){
					console.log('外层函数');
					return ()=>{
						console.log('我是一个箭头函数');
						console.log(this);
					}
				}
			}
            li.buy()();

效果

箭头函数，不能当做构造函数使用，不能使用new关键字。
apply call bind 可以更改函数的this指向。
代码

        var  li={
				name:'李明',
				age:'18',
				buy:function(){
					console.log('外层函数');
					return ()=>{
						console.log('我是一个箭头函数');
						console.log(this);
					}
				}
			}

            function  fun_1(){
				console.log(this);
			}
 
            li.buy()();
			fun.bind(li);
	    
	    fun_1.apply(temp);
		fun_1.call(li);
		var fun_2=fun_1.bind(li);
		fun_2();
		var s=li.buy().bind(temp);
		s();
		fun.apply(temp);
		fun.call(temp);

效果

直接修改箭头函数的this结果还是指向window
箭头函数指向问题:

1.普通箭头函数的this指向window
2.事件的this指向事件源
3.构造函数的this指向实例对象
4.具体对象的this指向当前对象
apply，call 修改this会直接调用
hind返回一个新函数。

2构造函数

通过class 名定义
js类就是一个超级构造函数，代码
定义一个狗类

	class Animal{
                constructor(){
                    this.explain='会动的生物';
				}
				basic(){
					console.log('运动');
				}
            }
            class Dog extends Animal{
				constructor(name,color){
					super(name,color);
                    this.color=color;
					this.name=name;
					this.leg=4;
					this.eye=2;
					this.mouth=1;
					this.ear=2;
					this.tall=1;
					this.intro=`狗狗有${this.leg}腿，${this.eye}只眼睛，${this.mouth}个嘴巴,${this.ear}只耳朵,${this.tall}条尾巴。狗狗是人类的好朋友。`
				}
				state(){
					console.log(`这是一只${this.color}的${this.name}`);
				}
                cry(){
					console.log('汪汪');
				}
				fawn(){
					console.log('卖萌打滚');
				}
			}
          

实例化

 var taidi=new Dog('泰迪','白色');
			taidi.state();
			taidi.cry();
			taidi.fawn();

效果

constructor()里面放自有属性
类的继承，通过，extends 继承类，继承的类拥有父类的属性和方法，之类添加属性，不影响父类
继承的函数 要使用 super()来复制参数，在子类中要使用了super()关键字，才可以使用this。如果继承的不传参数,会造成属性传参失败。
原型链：使用一个对象的属性或方法的时候，会在该对象的自身查找，找到了就使用，没找到就去关联的prototype哪里寻找，要是还是没找到就去prototype关联的prototype里寻找，依次类推，直到找到prototype为undefined。没有就报错了
静态属性和方法
静态属性和方法需要类直接调用，不需要实例对象
在类的方法前，写关键字static。表示该方法为静态方法，类可以直接调用。

static wan(){
	console.log('你好');
	}

使用

	Dog.wan();

效果

静态方法和静态属性是可以继承的，不是复制的和实例对象不一样。实例对象的属性是复制过来的。
静态属性，直接给类添加属性，可以通过类直接调用。

		Dog.a='食肉动物';
		console.log(Dog.a);

    console.log(taidi.a);

用实例对象调用，输出是undefined

私有方法，给方法名前加一个下滑线。默认该方法只能在类中调用。目前还没实现。

  class Cellphone{
				constructor(){
					this._recharge();
				}
				_recharge(){
					console.log('有些是必须要学习得');
				}
			}
			let huawei=new Cellphone();
            huawei._recharge();

目前还没实现。

二 .练习题

1、画出 object person student原型链关系图

1.编写程序使用ES6定义 Person类，包括类实例属性（name,age）,实例方法say()该方法

返回name和age字符串

  class Person{
       constructor(name,age){
           this.name=name;
           this.age=age;
       }
       say(){
           return `${this.name}${this.age}`
       }
   }
   class  Pupil extends Person{
       constructor(name,age,education){
           super(name,age,education);
           this.education=education;
       }
   }
   let liming=new Pupil('李明',20,'小学');
   var l=liming.say();
   console.log(l);

效果

3.下面程序正确吗？错在哪里？如何改正？

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
}
class ColorPoint extends Point {
          constructor(x, y, color) {
	this.color = color; // ReferenceError
	super(x, y);
           }
}
var cp=new ColorPoint(10,20,'red');

错误在于constructor复制父类的参数，super()要放在this之前

  //改正之后
class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
}
class ColorPoint extends Point {
      constructor(x, y, color) {
          super(x, y);
	      this.color = color; // ReferenceError
	
           }
}
var cp=new ColorPoint(10,20,'red');

4.下面程序执行结果为？

class Parent {
  static myMethod(msg) {
    console.log('static', msg);
  }
  myMethod(msg) {
    console.log('instance', msg);
  }
}
class Child extends Parent {
  static myMethod(msg) {
    super.myMethod(msg);
  }
  myMethod(msg) {
    super.myMethod(msg);
  }
}
Child.myMethod(1); // static 1
var child = new Child();
child.myMethod(2); // instance 2

输出结果是

'static'  1
'instance'   2

为什么·，因为静态方法，实例化对象只能调用普通的方法，只可以通过类调用静态方法，而类无法调用内部普通方法，实例对象也无法调用静态方法。

5.请利用class重新定义Cat，并让它从已有的Animal继承，然后新增一个方法say()，

返回字符串’Hello, xxx!’

class Animal {
    constructor(name) {
        this.name = name;
    }
}

cat类

class Animal {
    constructor(name) {
        this.name = name;
    }
}
class Cat extends Animal{
    constructor( name){
        super(name);
        this.name=name;
    }
    say(){
        return 'Hello.xxx!';

    }
 }
 let cat=new Cat('花花');
 var l=cat.say();
 console.log(l);

效果

6.接上面程序分析下面代码执行结果为

var kitty = new Cat('Kitty');
var doraemon = new Cat('哆啦A梦');
if ((new Cat('x') instanceof Animal) && kitty && kitty.name === 'Kitty' && kitty.say &&
 typeof kitty.say === 'function' && kitty.say() === 'Hello,Kitty!'  && 
kitty.say === doraemon.say) {
         console.log('测试通过!');
} else {
        console.log('测试失败!');
}

结果
测试通过；

7.下面程序执行结果为

(typeof (new (class { class () {} })));

结果 object;