es6 第二天

1----箭头函数
2—call apply bind this指向问题
3----es6 类
4----constructor
5—es6中的继承
6—继承注意问题
7—静态方法和静态属性
8—私有方法

1----箭头函数

	var add=(x,y,...a)=>{
				a.push(x,y)
				console.log(a)
			}
			add(1,2,2,3,4);

			// 箭头函数不可以当做构造函数使用
			// var Product=(title)=>{
			// 	this.title=title
			// }
			// var p=new Product('口红');

			var stu={
				name:'zs'
			}
			var fn=()=>{
				// 普通函数中的this指向window
				console.log(this)
			}
			fn()
			fn.call(stu);
		</script>
	</body>
</html>

<!-- 
	箭头函数
	1、箭头函数没有arguments概念，只有剩余参数
	2、箭头函数不可以当做构造函数使用，也就是说。不能使用new命令
	3、箭头函数中的this，指向的是定义的时候所在的对象，不是使用的时候所在的对象
 -->

2—call apply bind this指向问题

/*
			this指向问题：
				普通函数中的this：指向window
				事件函数中的this:指向的就是事件源
				构造函数中的this:指向的是实例对象
				具体对象中的this:指向的是当前对象
			call apply bind修改函数this指向
			call apply 都可以直接调用函数 call直接书写参数 apply实参是数组的形式
			bind不会直接调用函数，返回一个新的函数
		*/

		var stu={
			name:'zs'
		}
		function fn(a,b){
			// 正常情况下，this指向的是window。一些实际案例中，想让this指向stu对象
			console.log(a,b,this)
		}
		fn()

		// fn.call(参数1,参数2,参数3) 调用fn函数。修改this指向 第一个参数 this所要指向的对象。其余参数 函数的实参

		fn.call(stu,1,2);

		// fn.apply(参数1,[参数2,参数3])调用fn函数。修改this指向 第一个参数 this所要指向的对象。其余参数 函数的实参 以数组的形式
		fn.apply(stu,[2,3,4])

		// fn.bind(参数1,参数2,参数3) 不会直接调用函数 返回一个新的函数，修改了this的指向  第一个参数 this所要指向的对象。其余参数 函数的实参

		var fn1=fn.bind(stu,1,2);
		fn1()

3----es6 类

<!-- es6类的概念，只是一个"语法糖" 。es6实现的关于类的大多数功能都可以通过之前的语法实现-->
		// 完整类的定义综合了之前的构造函数+原型方式
		// class 类名{
		// 	constructor(){
		// 		放置的是自有属性
		// 	}
		// 	此处放置共有方法
		// }
			class Product{
				// 类内部，方法与方法之间不加符号
				// constructor放置属性
				// 此处的属性类似于之前通过构造函数生成的
				constructor(title,price){
					this.title=title;
					this.price=price;
					// joinCar属于自有的
					this.joinCar=function(){
						console.log('您确认加入购物车吗')
					}
				}

				// 方法单独书写 写在此处的方法都是放置在了Product.prototype里面
				buy(){
					console.log(`您确认购买${this.title}`);
				}
			}
			var p=new Product('水杯',100);
			console.log(p);
			console.log(p.hasOwnProperty('buy'));
			console.log(p.hasOwnProperty('title'))
			console.log(p.hasOwnProperty('joinCar'));
			console.log(p.__proto__==Product.prototype);
			console.log(p instanceof Product);
			console.log(Product.prototype.isPrototypeOf(p))

4----constructor

class Product{
// constructor方法时类的默认方法，一个类必须有constructor方法，如果没有显示定义，一个空的constructor方法会被默认添加。通过new命令生成实例对象的时候，自动调用方法
				// constructor方法默认返回的是实例对象，完全可以指定返回一个别的对象
				constructor(title){
					return new Array(10,20);
					this.title=title;
				}
			}

			// 此时实例对象的时候，返回的是一个数组 
			// 以后实例对象的时候，一定要留意constructor内部的内容
			var p=new Product('水杯');
			console.log(p.title);
			p.push(1,2,3,4);
			console.log(p);
			console.log(p instanceof Array);
			console.log(Array.prototype.isPrototypeOf(p))

5—es6中的继承

// 定义通用属性
			class Person{
				constructor(name,sex,age){
					this.name=name;
					this.sex=sex;
					this.age=age;
					this.eat=function(){
						console.log('eat')
					}
				}
				login(){
					console.log('登陆了页面。。。。')
				}
			}
			// 原型链：当从一个对象那里调取属性或者方法的时候，如果该对象自身不存在这样的属性或者方法。就会去关联的prototype那里寻找。如果prototype没有。就会去prototype关联的前辈prototype那里寻找。如果没有，依次向上寻找。依次类推。直到prototype....prototype为undefined的时候

			// Student继承自Person
			// es6中通过extends关键字实现继承
			class Student extends Person{
				constructor(name,sex,age,id){
					// super呈递继承过来的属性。继承来自父级的属性(相当于把父级属性复制过来)
					// 根本上来说，就是把属性复制过来
					super(name,sex,age);
					this.id=id;
					this.login=function(){
						console.log(this.name+'登陆了页面。。。。')
					}
				}
				login(){
					console.log('这是学生自己有的登陆方法')
				}

			}

			var stu=new Student('zs','man',20,20210414);
			console.log(stu);
			console.log(stu.hasOwnProperty('name'));
			stu.login();
			// 方法类的不需要呈递，直接继承
			stu.eat()

6—继承注意问题

class Person{
			constructor(name){
				this.name=name;
			}
			login(){
				console.log('登录了页面')
			}
		}
		class Student extends Person{
			constructor(name,id){
				// 在子类的构造函数中，只有调用了super以后，才可以使用this关键字。否则就会报错
				// 这是因为子类实例对象的构建是基于父类进行加工的。只有super方法才可以返回父类实例

				// 使用this之前一定要调用super
				// this.id=id

				// 如果继承的参数不书写，造成属性传参失败
				// 函数类的可以直接调用
				super(id);
				this.id=id;
			}
		}
		var stu=new Student('zs',2010);
		console.log(stu);

7—静态属性和静态方法

<!-- 静态方法和静态属性只能通过类直接调用，不需要实例对象 -->
		
			class Product{
				// 在类的方法前面加上static以后 就表示该方法为静态方法，只能通过类直接调用
				static buy(){
					console.log('您确认购买商品吗')
				}
				buy(){
					console.log('maile......')
				}
			}
			// 静态属性值得是类本身的属性。通过类名.静态属性名直接赋值。只能通过类调用
			Product.price=1000;
			var p=new Product();
			p.buy();
			Product.buy();
			console.log(Product.price);
			class Fruit extends Product{
				constructor(){
					super()
				}
			}
			//静态方法和静态属性是可以继承的 ,不是复制的和实例对象的属性不一样，实例对象的属性是复制过来的
			Fruit.buy()
			console.log(Fruit.price);
			// 也是继承的
			console.log(Fruit.hasOwnProperty('buy'))
			console.log(Fruit.hasOwnProperty('price'))
			console.log(Product.hasOwnProperty('buy'))

8—私有方法

// 私有方法是常见需求，但是es6不提供。
		// 私有方法只能在类中调用
		class Product{
			shopCar(){
				this._buy()
			}
			// es最新的提案中，说的是如果方法以 _ 开始，默认该方法只能在类中调用。但是目前实现不了

			_buy(){
				console.log('购买商品')
			}
		}
		var p=new Product();
		// 按照私有原则，此处不可以使用
		p._buy();
		p.shopCar()