精华内容
下载资源
问答
  • // es5和es6声明类的区别es5没有统一语法规范。es6有统一写法规范 start。 // es5声明“类”的语法--伪类 // function Person(name,age){ // this.name = name; // this.age = age; // // this.showName = ...
    // es5和es6声明类的区别,es5没有统一语法规范。es6有统一写法规范 start。
    // es5声明“类”的语法--伪类
    // function Person(name,age){
    //     this.name = name;
    //     this.age = age;
    //     // this.showName = function(){
    //     //     alert(this.name);
    //     // };
    //     // this.showAge = function(){
    //     //     alert(this.age);
    //     // }
    // }
    // Person.prototype.showName = function(){
    //     alert(this.name)
    // }
    // Person.prototype.showAge = function(){
    //     alert(this.age)
    // }
    // let p = new Person('blue',18);
    // p.showName();
    // p.showAge();
    
    // es6有单独的声明类的方法
    // class Person{
    //     constructor(name,age){
    //         this.name = name;
    //         this.age = age;
    //     }
    //     showName(){
    //         alert(this.name);
    //     }
    //     showAge(){
    //         alert(this.age);
    //     }
    // }
    // let p = new Person('red',19)
    // p.showName();
    // p.showAge();
    // es5和es6声明类的区别,es5没有统一语法规范。es6有统一写法规范 end。
    // es5和es6的继承区别 ----------------- start
    // es5
    // function Person(name,age){
    //     this.name = name;
    //     this.age = age;
    // }
    // Person.prototype.showName = function(){
    //     alert(this.name)
    // }
    // Person.prototype.showAge = function(){
    //     alert(this.age)
    // }
    // function Worker(name,age,job){
    //     Person.call(this,name,age);
    //     this.job = job;
    // }
    // Worker.prototype = new Person()
    // Worker.prototype.constructor = Worker;
    // Worker.prototype.showJob = function(){
    //     alert(this.job);
    // };
    // let w = new Worker('huihui',2,'大学教授');
    // w.showName();
    // w.showAge();
    // w.showJob();
    
    // es6
    class Person{
        constructor(name,age){
            this.name = name;
            this.age = age;
        }
        showName(){
            alert(this.name);
        }
        showAge(){
            alert(this.age);
        }
    }
    class Worker extends Person{
        constructor(name,age,job){
            super(name,age);
            this.job = job;
        }
        showJob(){
            alert(this.job);
        }
    }
    let w = new Worker('张景辉','28','大学教授');
    w.showName();
    w.showAge();
    w.showJob();
    // 
    // es5和es6的继承区别 ----------------- end

     如果对小哥哥小姐姐有帮助请点个推荐哈,欢迎留言、评论、搞事!!   双肩背包 【正品折扣专业店】 -- biy1314.taobao.com

    转载于:https://www.cnblogs.com/jwzhang/p/11148521.html

    展开全文
  • es5和es6继承的主要区别

    千次阅读 2020-06-18 18:58:45
    下面我们来分别看看es5和es6的类的继承! 1 es5继承 function FatherClass(name){ this.family=['father','mother','daughter']; this.name = name }; FatherClass.prototype.getName =function(){ console.log...

    在es5中当我们谈到类,就会想到构造函数,原型等,其实在es6中也有这些东西,ES6中的类只是语法糖,它并没有改变类实现的本质。下面我们来分别看看es5和es6的类的继承!

    1. es5的继承
    function FatherClass(name){
    this.family=['father','mother','daughter'];
    this.name = name
    };
    FatherClass.prototype.getName =function(){
    console.log(this.name);
    };
    function ChilderClass(name,age){
    //子类继承父类(没涉及到父类原型)
    FatherClass.call(this,name)
    this.age =age;
    };
    function F(){};
    //过渡函数的原型继承父对象
    F.prototype =FatherClass.prototype;
    ChilderClass.prototype = new F();
    var instance = new ChilderClass('lily',18);
    

    这个就是es5的类继承,它分两种继承方式:构造函数继承和原型继承!子类继承父类的时候,先创造子类的实例对象this,然后再将父类的方法或者属性添加到this上面(FatherClass.call(this,name)),然后再去继承原型链!如果我们要用es5写法去实现原生构造函数的继承(原生构造函数是指语言内置的构造函数)会是怎么写呢?

    function MyArray() {
      Array.apply(this, arguments);
    };
    MyArray.prototype = Object.create(Array.prototype);
    MyArray.prototype.constructor = MyArray;
    var colors = new MyArray();
    colors[0] = "red";
    colors.length  // 0
    colors.length = 0;
    colors[0]  // "red"
    

    上面代码定义了一个继承 Array 的MyArray类。但是,这个类的行为与Array完全不一致。之所以会发生这种情况,是因为子类无法获得原生构造函数的内部属性,ES5 是先新建子类的实例对象this,再将父类的属性添加到子类上,由于父类的内部属性无法获取,导致无法继承原生的构造函数!

    2. es6的继承

    还是基于上面的例子用es6的写法

    class FatherClass {
        family = ['father', 'mother', 'daughter'];
        constructor(name) {
            this.name = name
        }
        getName() {
            console.log(this.name);
        }
    };
    
    class ChilderClass extends FatherClass {
        constructor(name, age) {
            super(name);
            this.age = age;
        }
    };
    var instance = new ChilderClass('lily', 18);
    

    看起来是不是舒服多了?这里类继承机制完全和es5不一样,先调用super方法将父类实例对象的属性和方法加到this上面,然后再用子类的构造函数修改this。在子类的构造函数中,只有调用super之后,才可以使用this关键字,否则会报错。这是因为子类实例的构建,基于父类实例,只有super方法才能调用父类实例!

    console.log(ChilderClass.__proto__ === FatherClass);//true
    console.log(ChilderClass.prototype.__proto__ === FatherClass.prototype);//true
    

    这里比es6多了个静态方法继承,因为ChilderClass要继承FatherClass,那么FatherClass的静态属性和方法也都需要继承,所以 ChilderClass=Object.create(FatherClass)或者 Object.setPrototypeOf(ChilderClass,FatherClass).用es5一样ChilderClass.prototype也必须是FatherClass.prototype的实例!然后我们看下实现原生构造函数的继承(原生构造函数是指语言内置的构造函数)

    class MyArray extends Array {
    constructor(...args) {
      super(...args);
    }
    };
    var colors= new MyArray();
    colors[0] = "red";
    colors.length  // 1
    colors.length = 0;
    colors[0]  // underfined
    

    所以总体看来,es5类继承和es6类继承区别还是有些区别的!以上为我个人观点,如果有不正确的,请指正,不胜感激!

    展开全文
  • ES5和ES6继承区别

    千次阅读 2018-10-16 23:25:42
    前端面试题之JS ES5和ES6继承区别 ES5的继承方法可以看这篇: https://mp.csdn.net/mdeditor/83098432# ES5与ES6的继承方法对照: ES5 function Parent() { this.name = 'parent'; this.arr = [1,2,3,4]; } ...

    ES5的继承方法可以看这篇:
    https://blog.csdn.net/qq593249106/article/details/83098432

    ES5与ES6的继承方法对照:

    ES5

    function Parent() {
        this.name = 'parent';
        this.arr = [1,2,3,4];
    }
    Parent.prototype.say = function () {
        console.log('say');
    };
    function Child(age) {
        Parent.call(this);
        this.age = age;
    }
    Child.prototype = Object.create(Parent.prototype);
    Child.prototype.constructor = Child;
    var c = new Child(12);
    console.log(c.name); //输出parent
    c.say(); //输出say
    console.log(c.constructor); //输出function Child(age) {Parent.call(this);this.age = age;}
    console.log(new Parent().constructor); //输出Parent() {this.name = 'parent';this.arr = [1,2,3,4];}
    

    ES6

    class Parent2 {
        constructor() {
            this.name = 'parent';
        }
    }
    Parent2.prototype.say = function () {
        console.log('say');
    };
    class Child2 extends Parent {
        constructor(age) {
            super();
            this.age = age;
        }
    }
    var c2 = new Child2(12);
    console.log(c2.name); //输出parent
    c2.say(); //输出say
    console.log(c.constructor); //输出function Child(age) {Parent.call(this);this.age = age;}
    console.log(new Parent().constructor); //输出Parent() {this.name = 'parent';this.arr = [1,2,3,4];}
    

    ES5的继承实质上是先创建子类的实例对象,然后再将父类的方法添加到this上(Parent.apply(this)),然后再把原型链继承。

    ES6的继承机制完全不同,实质上是先创建父类的实例对象this(所以必须先调用父类的super()方法,才可使用this关键字,否则报错。),然后再用子类的构造函数修改this实现继承。

    展开全文
  • 继承的几种方式: 原型链继承 // 原型链继承 通过prototype function superType(){ this.color = ["red","green","blue"] } function subType(){} // 继承superType subType.prototype = new superType() let ...

    继承的几种方式:

    原型链继承

    // 原型链继承  通过prototype
    function superType(){
        this.color = ["red","green","blue"]
    }
    function subType(){}
    // 继承superType
    subType.prototype = new superType()
    let instance = new subType()
    instance.color.push("yellow")
    console.log(instance.color)    // red green blue yellow

    组合继承(也叫伪经典继承):结合了原型链和盗用构造函数,将两者的优点集合起来。基本思路就是使用原型链继承原型上的属性和方法,通过盗用构造函数继承实例属性。这样既可以把方法定义在原型上以实现重用,又可以让实例都有自己的属性。

    //组合继承
    function superType(name){
        this.name = name
        this.color = ['red','yellow','blue']
    }
    subType.prototype.sayName = function(){  // 在原型上添加了一个sayName方法
        console.log(this.name)
    }
    
    function subType(name,age){
        superType.call(this,name)   // 继承superType上的属性
        this.age = age
    }
    // 继承方法
    subType.prototype = new superType()
    subType.prototype.sayAge = function(){
        console.log(this.age)
    }
    let instance = new subType("jack","20")
    instance.color.push("green")
    console.log(instance.color)    // red yellow blue green
    console.log(instance.sayName)  // jack
    console.log(instance.sayAge)   //20

    原型式继承:创建一个临时构造函数,将传入的对象赋值给这个构造函数的原型,然后返回这个临时类型的一个实例。

    使用情况:你有一个对象,想在这个对象的基础上创建一个新的对象,就需要把这个对象先传给Object(),然后再对返回的对象进行适当的修改

    // Object()函数创建一个临时构造函数
    function obiect(o){
        function F(){
            F.prototype = o
            return new F()
        }
    }
    let person = {
        name:'jack'
        friend:['sam','lucy','lili']
    }
    let anotherPerdson = object(person) // 先把一个对象传给object()
    anotherPerson.name = 'greg'
    anotherPerson.friend.push('shasha')
    console.log(person.friend) // 'sam lucy lili shasha'
    
    
    

    ECMAScript5增加了Object.create()方法   这个方法接收两个参数:一个参数的时候和object()用法一样,当增加第二个参数的时候(可选),可以给对象定义额外的属性

    // Object.create()
    function object(o){
        function F(){
            F.prototype = o
            return new F()
        }
    }
    let person = {
        name:'jack'
        friend:['ss','zz','bb']
    }
    let anotherPerson = Object.create(perwson,{
        name:{
            value:'greg'
        }
    })
    console.log(anotherPerson.name)   // greg
    

    寄生式继承:

    寄生式组合继承(引用类型继承的最佳模式):

    function inserit(son,father){
        var obj = Object.create(father.prototype) // 创建对象(创建父类原型的一个副本)
        obj.constructor = son                     // 增强对象(解决由于重写原型导致默认constructor丢失的问题)
        son.prototype = obj;                      // 赋值对象(将新创建的对象赋值给子类原型)                      
    }
    function SuperType(name,colors){// 定义一个父类
        this.name = name;
        this.colors = colors
    }
    SuperType.prototype.sayName = function(){// 在supertype原型上添加了一个sayName方法
        return this.name
    }
    function SubType(job,name,color){//定义一个子类
        SuperType.call(this,name,color)  // 继承了父级supertype的属性
        this.job = job   // 添加了新的属性
    }
    inserit(SubType,SuperType) // 函数实现寄生式组合继承的核心逻辑,接收两个参数,子类构造函数和父类构造函数
    SubType.prototype.sayJob = function(){// 在子类上添加syaJob方法
        return this.job
    }
    var instance = new SubType("doctor","john",["red","green"])
    console.log(instance.sayJob(),instance.sayName())

    ES5和ES6继承的区别:

    1.ES5 的继承实质是先创建子类的实例对象,然后再将父类的方法添加 到 this 上(Parent.call(this)).

    2.ES6 的继承机制完全不同,实质上是先创建父类的实例对象 this(所以必 须先调用父类的super()方法),然后再用子类的构造函数修改 this。

    3.ES5 的继承时通过原型或构造函数机制来实现。

    4.ES6 通过 class 关键字定义类,里面有构造方法,类之间通过 extends 关 键字实现继承。

    //ES6继承写法  通过extends关键词
    class father{
    	constructor(name,age){
    		this.name = name
    		this.age = age
    	}
    }
    class son extends father{
    	constructor(name,age,job){
    		super(name,age)
    		this.job = job
    	}
    }
    var instance = new son('jack','18','doctor')
    console.log(instance)

    5.子类必须在 constructor 方法中调用 super 方法,否则新建实例报错。因 为子类没有自己的 this对象,而是继承了父类的 this 对象,然后对其进行加工。 如果不调用 super 方法,子类得不到 this 对象。

    6.注意 super 关键字指代父类的实例,即父类的 this 对象。 注意:在子类构造函数中,调用 super 后,才可使用 this关键字,否则报错

    如果你觉得文章对您有用,麻烦点个赞哦👍

    展开全文
  • ES5和ES6区别

    千次阅读 2021-09-08 21:43:44
    JavaScript ... JavaScript由三部分组成:ECMAScript(核心)+ DOM(文档对象模型)+ BOM(浏览器...ES5和ES6的不同之处 1 系统库的引用 ES5中的引用需要先使用require导入包,成为对象,再去进行真正引用 // ES5 var Reac
  • ES5ES6继承区别

    千次阅读 2018-11-08 16:44:54
    1.ES5继承实质上是先创建子类的实例对象,然后再将父类的方法添加到this上(Parent.apply(this)). 2.ES6继承机制完全不同,实质上是先创建父类的实例对象this(所以必须先调用父类的super()方法),然后再用...
  • ES5ES6继承

    2021-10-10 15:45:17
    ES5继承是通过构造函数原型来实现的 1、利用call修改this指向来继承父构造函数的属性方法 // 1. 父构造函数 function Father(uname, age) { // 父构造函数内的this指向父构造函数的对象实例 this.uname = ...
  • ES5的继承和ES6继承区别

    千次阅读 2020-08-11 18:23:26
    ES6继承: 类的描述:通过class关键字定义类,类中有constructor()默认方法,创建类的对象时被调用,constructor()方法也称为类的构造方法,一个类中有且仅有一个构造方法 基本思想:通过extend关键字实现继承,子类...
  • ES5继承分别有以下几种 原型链继承 通过将对象的__proto__指向被继承构造函数的protopyte,使得新的对象在寻找属性方法的时候能够通过__proto__向上查找原型链,用于定义实例间共享的属性或方法。这种方案最大...
  • ES5和ES6 实现继承方式

    2019-06-17 19:42:38
    ES5 中:通过原型链实现继承的,常见的继承方式是组合继承和寄生组合继承; 在ES6中:通过Class来继承 组合继承:结合了构造函数原型链继承 在子类构造函数中 调用父类构造函数,并通过 call 改变 this 的指向 ...
  • es5和es6区别、以及es6的新特性

    千次阅读 2021-03-28 15:21:16
    es5和es6区别 系统库的引入 es5ES5中的引用需要先使用require导入React包,成为对象,再去进行真正引用 es6ES6里,可以使用import方法来直接实现系统库引用,不需要额外制作一个类库对象 导出及引用单个类 es5...
  • ES5继承的实现非常有趣的,由于没有传统面向对象类的概念,Javascript利用原型链的特性来实现继承,这其中有很多的属性指向需要注意的地方。原型链的特点实现已经在之前的一篇整理说过了,就是通过将子类构造...
  • // ES5 继承 function parent(params) { } parent.prototype.sayName = function () { console.log('parent'); } function childen(params) { parent.apply(this) } childen.prototype.sayName = fun...
  • ES5/ES6继承除了写法以外还有什么区别? 1.class 声明会提升,但不会初始化赋值。Foo 进入暂时性死区,类似于 let、const 声明变量。 const bar = new Bar(); // it's ok function Bar() { this.bar = 42; } ...
  • 目录前言一、原型链继承二、借用构造函数继承三、组合继承四、原型式继承五、寄生式继承六、寄生组合式继承七、 ES6通过class的extends实现继承八、ES5ES6继承区别九、总结 一、原型链继承 二、借用构造函数...
  • 」, 刚看到这个问题时,直接就想到了继承行为在 javascript 中的表现。后面作者的一句话「super 不可以省略,省略的话会报错」。当时脑海中蹦出来一个念头,这个同学是不是写错了,super 不就是用来完成调用父类构造...
  • 动态: 在运行时确定数据类型。变量使用之前不需要类型声明,通常变量的类型是那个被赋值的类型。 弱类: ...新对象继承对象(此对象为模板对象),将自身的属性共享给新对象,模板对象称为...
  • ES5和ES6继承

    2020-12-24 16:04:33
    ES5原型的几种常用继承方式 原型链继承(子类原型指向父类实例) function SuperType() { this.colors = ['red', 'blue', 'green']; } function SubType() {} SubType.prototype = new SuperType(); let ...
  • 构造函数就是你构造出来的函数,是一种特殊的方法,与普通函数有着质的区别,其作用,在创建对象的时候主要用来初始化对象,就是给对象成员赋初始值,构造函数的主要特征就是方法名、首字母大写,并且用new来使用 ...
  • es5老版本 ** var 声明语句声明一个变量,并可选地将其初始化为一个值。 var a=100; alert(a); ** es6新版本 ** let 语句声明一个块级作用域的本地变量,并且可选的将其初始化为一个值。 let b=12; alert(b);...
  • ES5 ES6区别 ES6 的新增方法 1、新增声明命令 let const 1.1)特点 2、模板字符串(Template String) 3、函数的扩展 3.1)函数的默认参数 3.2)箭头函数 4、对象的扩展 4.1)属性的简写 4.2)...
  • ES6中的类只是语法糖,它并没有改变类实现的本质。 举个例子,在ES5中定义一个类: function Person(name, age) { this.name = name; this.age=age; } Person.prototype.sayHello = function(){ return ...
  • Vue---Es5和Es6区别

    千次阅读 2020-05-19 22:22:23
    1.系统库的引入 Es5:需要先使用require导入React包,成为对象,再去进行真正引用; Es6:可以使用import方法来直接实现系统库... Es6:可以使用用export default来实现相同的功能,使用import方法来实现导入 注意:ES5和
  • JavaScript、ES5和ES6的介绍和区别

    万次阅读 2017-09-11 16:01:09
    JavaScript、ES5和ES6的介绍和区别 JavaScript简介 JavaScript一种动态类型、弱类型、基于原型的客户端脚本语言,用来给HTML网页增加动态功能。 JavaScript由三部分组成: ECMAScript(核心)+DOM(文档对象模型...
  • 如果以前问我ES5继承和ES6继承有什么区别,我一定会自信的说没有区别,不过是语法糖而已,充其量也就是写法有区别,但是现在我会假装思考一下,然后说虽然只是语法糖,但也是有点小区别的,那么具体有什么区别呢...
  • ES5继承 构造函数、原型实例的关系:每一个构造函数都有一个原型对象,每一个原型对象都有一个指向构造函数的指针,而每一个实例都包含一个指向原型对象的内部指针 1.原型链实现继承 基本思想:利用原型让一个引用...
  • 前端面试之ES5ES6区别

    万次阅读 2018-10-07 17:00:32
    首先我们来看一下ES是什么?全称为ECMAScript,是JavaScript语言的核心,它... ES5中的引用需要先使用require导入React包,成为对象,再去进行真正引用 //ES5 var React = require("react"); var { ...
  • es5继承 es6继承

    2020-11-19 23:54:15
    es5继承 es6继承代码 代码 // es5 继承 function Parent(content){ this.content = content } Parent.prototype.say = function(){ console.log(this.content) } // 普通继承缺点:不会继承原型 function Child...
  • ES5和ES6如何实现继承

    2019-10-09 16:06:56
    es5继承方式有很多种,原型链继承、组合式继承、寄生组合继承,相比来说寄生组合式继承集组合式继承和寄生式继承的优点于一身,是ES5中,基于类型继承的最有效方式。 寄生组合式继承 function inserit(son, ...
  • JavaScript 的面向对象和继承,是经常用到的方式方法。 一、传统方法写类(ES5) // 1. 构造函数 let Person = function({name,age,height}={}){ this.name = name ; this.age = age ; this.height = height...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 15,717
精华内容 6,286
关键字:

es5和es6继承的区别