ES5和ES6的类的区别

ES5和ES6的类的区别一、写法上面的区别我们用ES5定义一个类:functionPerson(name,age){this.name=name;this.age=age;}Person.prototype={say:function(){console.log(‘hello’);},sayHi(){console.log(‘hi’);}};Person.eat=function(){c

目录

一、写法上面的区别

二、二者的其他区别

1.class 不能提升

2.class只能通过new 实例

3.class的原型上属性不能遍历

 4.实现继承的方法不同


一、写法上面的区别

我们用ES5定义一个类:

function Person(name,age){
    this.name = name;
    this.age = age;
}
Person.prototype = {
    say: function(){
        console.log('hello');
    },
    sayHi() {
        console.log('hi');
    }
};
Person.eat = function(){
    console.log('eat')
}
console.log (typeof Person)

我们再用ES6的方法定义一个类

class Person {
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
    say(){
        console.log('hello')
    }
    sayHi(){
        console.log('hi')
    }
    static eat(){
        console.log('eat');
    }
}
console.log (typeof Person)

我们用typeof Person    检测一下可以发现不管是ES6还是ES5,Person的类型都是函数(function),所以两者虽然写发上有区别但是其本质都是一样的。

二、二者的其他区别

1.class 不能提升

我们先验证ES5中的Person是否可以提升;

 console.log(Person)
function Person(name,age){
    this.name = name;
    this.age = age;
}
Person.prototype = {
    say: function(){
        console.log('hello');
    },
    sayHi() {
        console.log('hi');
    }
};
Person.eat = function(){
    console.log('eat')
}

ES5和ES6的类的区别

 结果显而易见可以提升;我们再看看ES6:

console.log(Person)
class Person {
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
    say(){
        console.log('hello')
    }
    sayHi(){
        console.log('hi')
    }
    static eat(){
        console.log('eat');
    }
}

ES5和ES6的类的区别

就会报错说“Cannot access ‘Person’ before initialization”,初始化前无法访问“Person”;因为ES6类是严格模式下的,不存在变量提升;

2.class只能通过new 实例

当我们对两段代码分别使用console.log(Person())时在ES5中

 ES5和ES6的类的区别

 而在es6中就会报错

ES5和ES6的类的区别

 在没有“new”的情况下无法调用类构造函数Person

3.class的原型上属性不能遍历

在ES5中原型上的属性是可以遍历的:

var  p = new Person();
for (var i in p)
{
    console.log(i)
}

ES5和ES6的类的区别

而在ES6中就不可以遍历:

ES5和ES6的类的区别

 4.实现继承的方法不同

ES6中通过extends关键字完成继承


//使用class构造一个父类
class Parent {
    constructor(name,age){
      this.name = name
      this.age = age
    }
    sayName(){
      console.log(this.name);
    }
  }
//使用class构造一个子类,并使用extends实现继承,super指向父类的原型对象
class Child extends Parent{
    constructor(name,age,gender){
      super(name,age)
      this.gender = gender
    }
    sayGender(){
      console.log(this.gender);
    }
  }
//实例化对象
  let r = new Child('张三',18,'男')
  r.sayGender()
  r.sayName()
  console.log(r.age);
  console.log(r)

ES5和ES6的类的区别

而ES5中实现继承的方法有主要是通过原型链实现继承的;比较好用且常见的就是组合式继承:

function Father(name,age){
    this.name = name;
    this.age = age;
}
Father.prototype.say = function(){
    console.log('hello');
}
function Son(name,age,sourse){
    Father.call(this,name,age);
    this.sourse = sourse;
}
Son.prototype = new Father();
Son.prototype.said = function(){
    console.log('hi');
}
var s1 = new Son('李四',18,60);
console.log(Son.prototype);
console.log(s1.__proto__);
console.log(s1);
s1.say();
s1.said();

ES5和ES6的类的区别

今天的文章ES5和ES6的类的区别分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/7448.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注