搜索
首页web前端前端问答es6与es5的构造函数有什么区别

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

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
使用HTML5可以播放哪种类型的音频文件?使用HTML5可以播放哪种类型的音频文件?Apr 30, 2025 pm 02:59 PM

本文讨论了HTML5音频格式和跨浏览器兼容性。它涵盖MP3,WAV,OGG,AAC和WebM,并建议使用多个来源和后备以实现更广泛的可访问性。

SVG和Canvas HTML5元素之间的区别?SVG和Canvas HTML5元素之间的区别?Apr 30, 2025 pm 02:58 PM

SVG和画布是Web图形的HTML5元素。基于向量的SVG擅长可扩展性和交互性,而基于像素的画布则更适合游戏等性能密集型应用程序。

使用HTML5可能会拖放吗?使用HTML5可能会拖放吗?Apr 30, 2025 pm 02:57 PM

HTML5可以通过特定的事件和属性进行拖放,从而允许自定义,但面临旧版本和移动设备上的浏览器兼容性问题。

< meter&gt之间有什么区别; tag and&&&>标签?< meter&gt之间有什么区别; tag and&&&>标签?Apr 30, 2025 pm 02:56 PM

本文讨论了HTML的≪ Meter≫ &&<标签,用于显示标量值和任务进度。

将以下数据转换为HTML5中的表格格式?将以下数据转换为HTML5中的表格格式?Apr 30, 2025 pm 02:54 PM

这是使用HTML5转换为表格格式的数据,包括响应式设计的示例和策略,造型的最佳实践以及表格结构中使用的语义HTML5标签:<!doctype html> < html lang =&

定义图像图?定义图像图?Apr 30, 2025 pm 02:53 PM

本文讨论了网络设计中的图像图,它们的好处,例如增强的导航和参与度以及创建工具。

是Lt; Datalist> tag和&&&&&oflect>标记相同吗?是Lt; Datalist> tag和&&&&&oflect>标记相同吗?Apr 30, 2025 pm 02:52 PM

本文讨论了< datalist> gt; &&< select>标签,专注于其功能,用户互动以及对不同Web开发方案的适用性。

< tig> tag和&&&&img>标签?< tig> tag和&&&&img>标签?Apr 30, 2025 pm 02:50 PM

本文讨论了HTML的Lt; gt; gt; &< img>标签,专注于他们的目的,用法和语义优势。主要论点是> gt;提供更好的结构和访问

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

安全考试浏览器

安全考试浏览器

Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。

EditPlus 中文破解版

EditPlus 中文破解版

体积小,语法高亮,不支持代码提示功能

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )专业的PHP集成开发工具