es6箭头函数、类、继承概念解析

 

箭头函数

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

//箭头函数不能做构造函数使用
var Product=(title)=>{
				this.title=title
			}
			var p=new Product('口红');//Product is not a constructor

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()

类(class)

        // 完整类的定义综合了之前的构造函数+原型方式
        // 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))
            //Product { title: '水杯', price: 100, joinCar: [Function] }
            //false
            //true
            //true
            //true
            //true
            //true

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

			

继承

class Person{
				constructor(name,sex,age){
					this.name=name;
					this.sex=sex;
					this.age=age;
					this.eat=function(){
						console.log('eat')
					}
				}
				login(){
					console.log('登陆了页面。。。。')
				}
			}
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.hasOwnProperty('login'));//false
console.log(stu.hasOwnProperty('name'));//true

静态方法和静态属性

	class Product{
				// 在类的方法前面加上static以后 就表示该方法为静态方法，只能通过类直接调用
				static buy(){
					console.log('您确认购买商品吗')
				}
				buy(){
					console.log('maile......')
				}
			}
			// 静态属性值得是类本身的属性。通过类名.静态属性名直接赋值。只能通过类调用
			Product.price=1000;
class Fruit extends Product{
				constructor(){
					super()
				}
			}
var fruit=new Fruit();
console.log(Fruit.hasOwnProperty('buy'))//false
console.log(Fruit.hasOwnProperty('price'))//false

私有方法

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

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