• 技术文章 >web前端 >前端问答

    es6与es5的构造函数有什么区别

    长期闲置长期闲置2022-04-25 18:09:15原创261

    区别:1、es6构造函数中类的变量不会被提升,也就是对象只能在类的定义之后才能创建,而es5中声明构造函数会变量提升;2、es6不可以直接调用构造函数,es5中可以直接调用构造函数,将构造函数当成普通函数使用。

    本教程操作环境:windows10系统、ECMAScript 6.0版、Dell G3电脑。

    es6与es5的构造函数有什么区别

    使用构造函数构造可以复用的对象
    构造函数就是你构造出来的函数,是一种特殊的方法,与普通函数有着质的区别,其作用,在创建对象的时候主要用来初始化对象,就是给对象成员赋初始值,构造函数的主要特征就是方法名、首字母大写,并且用new来使用

    ES5

    function foo(){
    	this.name = 'Katherine';
    	this.age  = '26';
    }
    var f = new foo();
    console.log(f)		//Object
    console.log(f.name)	//Katherine
    console.log(f.age)  //26
    
    function foos(name,age,sex){
    	this.name = name;
    	this.age  = age;
    	this.sex  = sex;
    }
    var f1 = new foos('Kathrine', '26', 'female');
    var f2 = new foos('Stefan', '27', 'male');
    var f3 = new foos('Damon', '29', 'male');
    console.log(f1) //foos {name: "Kathrine", age: "26", sex: "female"}
    console.log(f2) //foos {name: "Stefan", age: "27", sex: "male"}
    console.log(f3) //foos {name: "Damon", age: "29", sex: "male"}

    ES6

    class foo{
    	constructor(){
    		this.name = 'Karherine';
    		this.age  = '26';
    	}
    	vampire(va){
    		console.log('Her name is '+this.name+' and she was '+this.age+' years old')
    	}
    }
    let f = new foo()
    	f.vampire();  //Her name is Karherine and she was 26 years old
    //继承原型	
    class foos extends foo{
    	constructor(){
    		super();
    		this.name = 'Stefan';
    		this.age  = '27';
    	}
    }	
    let f1 = new foos();
    	f1.vampire();  //His name is Stefan and he was 27 years old

    1、ES5可以用new生成对象,也可以直接调用构造函数,直接调用当成普通函数使用。比如函数foo();

    2、ES6必须用new生成对象,不可以直接调用构造函数成普通函数使用。

    与ES5不同,类的变量不会被提升,也就是说对象只能在类的定义之后才能创建。

    类的调用必须要使用new,而普通的构造函数可以当作普通函数来使用。

    【相关推荐:javascript视频教程web前端

    以上就是es6与es5的构造函数有什么区别的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:ES6
    上一篇:html5的div一行可以放两个吗 下一篇:css ul标签怎么去掉圆点
    千万级数据并发解决方案

    相关文章推荐

    • filter是es6的方法吗• es6怎么将数字转为字符串• es6怎么求两个数组的交集• es6核心特性是什么• es6中用什么导入资源
    1/1

    PHP中文网