箭头函数与普通函数区别 == es6中的class与继承

迈不过友情╰ 2022-12-28 07:51 275阅读 0赞

# 箭头函数与普通函数区别 #

## 一、箭头函数是匿名函数，不能作为构造函数，不能使用new ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70]

###### 箭头函数相当于匿名函数，并且简化了函数定义。箭头函数有两种格式：一种只包含一个表达式，连\{ … \}和return都省略掉。还有一种可以包含多条语句，这时候就不能省略\{ … \}和return。 ######

##### 不能作为构造函数，不能使用new #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][20201215165735442.png]

## 二、箭头函数内没有arguments，可以用展开运算符…解决 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 2]

## 三、箭头函数的this，始终指向父级上下文（箭头函数的this取决于定义位置父级的上下文，跟使用位置没关系，普通函数this指向调用的那个对象） ##

## 四、箭头函数不能通过call() 、 apply() 、bind()方法直接修改它的this指向。(call、aaply、bind会默认忽略第一个参数，但是可以正常传参) ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 3]

## 五、箭头函数没有原型属性 ##

![!\[在这里插入图片描述\](https://img-blog.csdnimg.cn/20201215165947645.png?x-oss-process=image/watermark,type\_ZmFuZ3poZW5naGVpdGk,shadow\_10,text\_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8=,size\_16,color\_FFFFFF,t\_70][https_img-blog.csdnimg.cn_20201215165947645.png_x-oss-process_image_watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70]

###### ============================================================================ ######

# es6中的class与继承 #

##### 前言： #####

> 传统的javascript中只有对象，没有类的概念。它是基于原型的面向对象语言。原型对象特点就是将自身的属性共享给新对象。这样的写法相对于其它传统面向对象语言来讲，独树一帜也可以说难以接受！

## ES5中的类 ##

###### ES5中如果要生成一个对象实例，需要先定义一个构造函数，然后通过new操作符来完成。 ######

##### 示例： #####

//构造函数名大写（非强制，但这么写有助于区分构造函数和普通函数）
    function Person(name,age) { 
        this.name = name;
        this.age=age;
    }
    Person.prototype.say = function(){ 
        return "我的名字叫" + this.name+"今年"+this.age+"岁了";
    }
    var obj=new Person("tom",88);//通过构造函数创建对象，必须使用new 运算符
    console.log(obj.say());//我的名字叫tom今年88岁了

##### 构造函数生成实例的执行过程： #####

1.当使用了构造函数，并且new 构造函数(),后台会隐式执行new Object()创建对象;
    2.将构造函数的作用域给新对象，（即new Object()创建出的对象），
      而函数体内的this就代表new Object()出来的对象。
    3.执行构造函数的代码。
    4.返回新对象（后台直接返回）;

## ES6中的类 ##

> ES6引入了class（类）这个概念，通过class关键字可以定义类。该关键字的出现使得javascript在对象写法上更加清晰，更像是一种面向对象的语言。

###### 将之前的代码改为ES6的写法： ######

class Person{ //定义了一个名字为Person的类
        constructor(name,age){ //constructor是一个构造方法，用来接收参数
            this.name = name;//this代表的是实例对象
            this.age=age;
        }
        say(){ //这是一个类的方法，注意千万不要加上function
            return "我的名字叫" + this.name+"今年"+this.age+"岁了";
        }
    }
    var obj=new Person("laotie",88);
    console.log(obj.say());//我的名字叫laotie今年88岁了

##### 注意项: #####

1.在类中声明方法的时候，千万不要给该方法加上function关键字
    2.方法之间不要用逗号分隔，否则会报错

###### 由下面代码可以看出类实质上就是一个函数。类自身指向的就是构造函数。所以可以认为ES6中的类其实就是构造函数的另外一种写法！ ######

console.log(typeof Person);//function
    console.log(Person===Person.prototype.constructor);//true

###### 以下代码说明构造函数的`prototype`属性，在ES6的类中依然存在着。 ######

\#\#\#\#\#\#`console.log(Person.prototype);//输出的结果是一个对象`

###### 实际上类的所有方法都定义在类的`prototype`属性上。代码证明下 ######

Person.prototype.say=function(){ //定义与类中相同名字的方法。成功实现了覆盖！
        return "我是来证明的，你叫" + this.name+"今年"+this.age+"岁了";
    }
    var obj=new Person("kity",88);
    console.log(obj.say());//我是来证明的，你叫kity今年88岁了

###### 当然也可以通过prototype属性对类添加方法。如下： ######

Person.prototype.addFn=function(){ 
        return "我是通过prototype新增加的方法,名字叫addFn";
    }
    var obj=new Person("kity",88);
    console.log(obj.addFn());//我是通过prototype新增加的方法,名字叫addFn

\#\#\#\#\#\#\# 还可以通过`Object.assign`方法来为对象动态增加方法

Object.assign(Person.prototype,{ 
        getName:function(){ 
            return this.name;
        },
        getAge:function(){ 
            return this.age;
        }
    })
    var obj=new Person("kity",88);
    console.log(obj.getName());//kity
    console.log(obj.getAge());//88

###### `constructor`方法是类的构造函数的默认方法，通过new命令生成对象实例时，自动调用该方法。 ######

class Box{ 
        constructor(){ 
            console.log("啦啦啦，今天天气好晴朗");//当实例化对象时该行代码会执行。
        }
    }
    var obj=new Box();

###### `constructor`方法如果没有显式定义，会隐式生成一个`constructor`方法。所以即使你没有添加构造函数，构造函数也是存在的。 ######

###### `constructor`方法默认返回实例对象`this`，但是也可以指定`constructor`方法返回一个全新的对象，让返回的实例对象不是该类的实例 ######

class Desk{ 
        constructor(){ 
            this.aa="我是一只小小小小鸟！哦";
        }
    }
    class Box{ 
        constructor(){ 
           return new Desk();// 这里没有用this哦，直接返回一个全新的对象
        }
    }
    var obj=new Box();
    console.log(obj.aa);//我是一只小小小小鸟！哦

\#\#\#\#\#\#`constructor`中定义的属性可以称为实例属性（即定义在this对象上），`constructor`外声明的属性都是定义在原型上的，可以称为原型属性（即定义在class上)。`hasOwnProperty()`函数用于判断属性是否是实例属性。其结果是一个布尔值，`true`说明是实例属性，`false`说明不是实例属性。`in操作符会在通过对象能够访问给定属性时返回true,无论该属性存在于实例中还是原型中。`

class Box{ 
        constructor(num1,num2){ 
            this.num1 = num1;
            this.num2=num2;
        }
        sum(){ 
            return num1+num2;
        }
    }
    var box=new Box(12,88);
    console.log(box.hasOwnProperty("num1"));//true
    console.log(box.hasOwnProperty("num2"));//true
    console.log(box.hasOwnProperty("sum"));//false
    console.log("num1" in box);//true
    console.log("num2" in box);//true
    console.log("sum" in box);//true
    console.log("say" in box);//false

###### 类的所有实例共享一个原型对象，它们的原型都是`Person.prototype`，所以`proto`属性是相等的 ######

class Box{ 
        constructor(num1,num2){ 
            this.num1 = num1;
            this.num2=num2;
        }
        sum(){ 
            return num1+num2;
        }
    }
    //box1与box2都是Box的实例。它们的__proto__都指向Box的prototype
    var box1=new Box(12,88);
    var box2=new Box(40,60);
    console.log(box1.__proto__===box2.__proto__);//true

###### 由此，也可以通过proto来为类增加方法。使用实例的proto属性改写原型，会改变Class的原始定义，影响到所有实例，所以不推荐使用！ ######

class Box{ 
        constructor(num1,num2){ 
            this.num1 = num1;
            this.num2=num2;
        }
        sum(){ 
            return num1+num2;
        }
    }
    var box1=new Box(12,88);
    var box2=new Box(40,60);
    box1.__proto__.sub=function(){ 
        return this.num2-this.num1;
    }
    console.log(box1.sub());//76
    console.log(box2.sub());//2

###### `class不存在变量提升`，所以需要先定义再使用。因为`ES6不会把类的声明提升到代码头部`，但是`ES5`就不一样`,ES5存在变量提升`,可以先使用，然后再定义。 ######

//ES5可以先使用再定义,存在变量提升
    new A();
    function A(){ 
    
    }
    //ES6不能先使用再定义,不存在变量提升 会报错
    new B();//B is not defined
    class B{ 
    
    }

## ES5中的继承 （组合继承:原型链继承 + 借用构造函数) ##

> 原型链继承：

###### 父类的实例作为子类的原型 ######

##### 借用构造函数继承： #####

> 在子类内,使用call()调用父类方法,并将父类的this修改为子类的this.相当于是把父类的实例属性复制了一份放到子类的函数内.

//父类
    function Persion(name,age){ 
        this.name=name;
        this.age=age;
        this.say=function(){ 
            console.log(`${ this.name} ${ this.age}`);
        }
    }
    Persion.prototype.test=function(){ 
        console.log("我是原型上的方法");
    }
    //子类
    function Women(){ 
        //在子类内,使用call()调用父类方法,并将父类的this修改为子类的this.相当于是把父类的实例属性复制了一份放到子类的函数内.
        Persion.call(this);
        this.name="child";
        this.age=18;
    }
    var one=new Women();
    one.say();//child 18
    one.test();// 报错 不能继承原型上的方法

##### 组合继承: #####

> 既能调用父类实例属性，又能调用父类原型属性

//解决方法，组合是继承，把子类的原型变成父类的实例
    function Persion(name,age){ 
        this.name=name;
        this.age=age;
        this.say=function(){ 
            console.log(`${ this.name} ${ this.age}`);
        }
    }
    Persion.prototype.test=function(){ 
        console.log("我是原型上的方法");
    }
    //子类
    function Women(name,age,sex){ 
        Persion.call(this,name,age);//实现继承的一种方式
        this.sex=sex
    }
    Women.prototype=new Persion();//把Women的原型变成Persion的实例（因为Women的实例能够访问到Women原型上的方法）
    
    var c=new Women('tom',20,'女');
    c.say();
    c.test();//成功继承原型上的方法

#### ES6中的 class继承 ####

*  ###### 父类（基类） ######
 *  ###### 子类 ######
 *  ###### `extends` 关键字 ######

//class 相当于es5中构造函数
    //class中定义方法时，前后不能加function，全部定义在class的protopyte属性中
    //class中定义的所有方法是不可枚举的
    //class中只能定义方法，不能定义对象，变量等
    //class和方法内默认都是严格模式
    //es5中constructor为隐式属性
    
    
    //父类
    class People{ 
      constructor(name='wang',age='27'){ 
        this.name = name;
        this.age = age;
      }
      eat(){ 
        console.log(`${ this.name} ${ this.age} eat food`)
      }
    }
    //子类 通过extends 继承父类
    class Woman extends People{  
       constructor(name = 'ren',age = '27'){  
         //继承父类属性
         super(name, age); 
       } 
        eat(){  
         //继承父类方法
          super.eat() 
        } 
    } 
    let wonmanObj=new Woman('xiaoxiami'); 
    wonmanObj.eat();

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70]: /images/20221120/1dfe07fe2d7d45a284a9a2ac2ee646ec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 1]: /images/20221120/a74e21885eff4f3b9cc46c3204695c6e.png
[20201215165735442.png]: /images/20221120/6166f2cc4bc046f39d00e4e3cf5c8b18.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 2]: /images/20221120/3eac3865e1e744dc83d39474f9d918be.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70 3]: /images/20221120/b481effc6bd24437a3237517bf4d47f6.png
[https_img-blog.csdnimg.cn_20201215165947645.png_x-oss-process_image_watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70]: /images/20221120/e89e3b8f38ed45af99af6d5c468ece3d.png