ES5和ES6类的知识
ECMAScript中的构造函数可用来创建特定类型的对象。像 Object 和 Array 这样的原生构造函数,在运行时会自动出现在执行环境中。此外,也可以创建自定义的构造函数,从而定义自定义对象类型的属性和方法。
function Person(name, age, job) {
this.name = name
this.age = age
this.job = job
this.sayName = function () {
console.log(this.name)
}
}
const person1 = new Person('张三', 18, 'student')
要创建 Person 的新实例,必须使用 new 操作符。以这种方式调用构造函数实际上会经历以下4个步骤:
1. 创建一个新对象
2. 将构造函数的作用域赋给新对象(因此 this 就指向了这个新对象)
3. 执行构造函数中的代码(为这个新对象添加属性)
4. 返回新对象
ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板。通过class关键字,可以定义类。
class Person {
constructor(name, age, job) {
this.name = name
this.age = age
this.job = job
this.sayName = function () {
console.log(this.name)
}
}
}
const person1 = new Person('张三', 18, 'student')
上面代码定义了一个“类”,可以看到里面有一个constructor方法,这就是构造方法,而this关键字则代表实例对象。也就是说,ES5 的构造函数Person,对应 ES6 的Person类的构造方法constructor。
class Person {
// ...
}
typeof Person // "function"
Person === Person.prototype.constructor // true
上面代码表明,类的数据类型就是函数,类本身就指向构造函数。使用的时候,也是直接对类使用new命令,跟构造函数的用法完全一致。
构造函数的prototype属性,在 ES6 的“类”上面继续存在。事实上,类的所有方法都定义在类的prototype属性上面。
class Person {
constructor () {
// ...
}
eat () {
console.log('food')
}
}
// 等同于
Person.prototype = {
constructor () {},
eat () {
console.log('food')
}
}
另外,ES6 类的内部所有定义的方法,都是不可枚举的。可以被for-in循环遍历出来的属性称为枚举属性。
for (const key in person1) {
console.log(key)
}
但是 ES5 类的内部定义的方法是可以枚举的。
function Person() {
// ...
}
const person1 = new Person()
Person.prototype.eat = function () {
console.log('eat')
}
for (const key in person1) {
console.log(key) // eat
}
如果只想遍历实例上的私有属性,需要添加额外的代码判断逻辑。通过hasOwnProperty可以做到。
for (const key in person1) {
if (person1.hasOwnProperty(key)) {
// ....
}
}
完
ES5和ES6类的知识相关推荐
- typescript学习之路(三) —— ts定义类的方法(包含es5以及es6的定义类)
提起类,不得不说一下,强类型编程语言,如php,java,c++等都有类的概念.而js作为一门弱类型语言,是没有类这个概念的,虽然也能模拟类的实现,但总归不是类.so,ts也只是模拟类而已,使得更贴切 ...
- (语法糖)ES6类class声明类的方式 -ES5类声明继承
本文将从以下几方面介绍类与继承 类的声明与实例化 如何实现继承 继承的几种方式 类的声明与实例化 类的声明一般有两种方式 // es5和es6声明类的区别,es5没有统一语法规范.es6有统一写法规范 ...
- es5和es6声明类的区别/es5和es6继承的区别
// es5和es6声明类的区别,es5没有统一语法规范.es6有统一写法规范 start. // es5声明"类"的语法--伪类 // function Person(name, ...
- typescript学习之路(四) —— ts类的继承(包含es5以及es6的类继承)
上一文已经写了es5,es6等类的定义,所以本章主要写es5和es6的继承,由于es6的继承和ts的继承如出一辙,只是加了类型定义而已,所以ts的继承稍微写下,不会太详细. 文章目录 es5继承 原型 ...
- ES5和ES6的类的区别
目录 一.写法上面的区别 二.二者的其他区别 1.class 不能提升 2.class只能通过new 实例 3.class的原型上属性不能遍历 4.实现继承的方法不同 一.写法上面的区别 我们用ES5 ...
- JS如何定义一个类分别用Es5和Es6来实现
前言 类是面向对象编程语言最基础,最核心的概念,正因为有了类,才可以拓展延伸出具有相同的属性和函数的对象类 对象的特点,就是它可以拥有属性和方法,而在Es6之前,并没有提供类的支持,它是用构造函数来模 ...
- 30分钟搞定ES6常用基础知识
ES6基础智商划重点 在实际开发中,ES6已经非常普及了.掌握ES6的知识变成了一种必须.尽管我们在使用时仍然需要经过babel编译. ES6彻底改变了前端的编码风格,可以说对于前端的影响非常巨大.值 ...
- 从babel实现es6类的继承来深入理解js的原型及继承
先聊个5毛钱的背景吧 自从有了babel这一个利器之后,es6现在已经被广泛的使用.JavaScript 类实质上是 JavaScript 现有的基于原型的继承的语法糖.类语法不会为JavaScrip ...
- ES5和ES6中对于继承的实现方法
在ES5继承的实现非常有趣的,由于没有传统面向对象类的概念,Javascript利用原型链的特性来实现继承,这其中有很多的属性指向和需要注意的地方. 原型链的特点和实现已经在之前的一篇整理说过了,就是 ...
最新文章
- 欢迎来到美多商城!-项目准备之项目介绍-项目需求分析-项目架构设计
- (Oracle学习笔记) Oracle概述
- 将数组放进集合中的简单方法
- SQL 批量插入有标识列的数据
- ASP.NET MVC (五、HttpClient接口解析)
- wordpress安装及使用
- 回归分析假设_回归分析假设的最简单指南
- StackExchange.Redis 官方文档(六) PipelinesMultiplexers
- 更新FreeBSD Ports的方法
- 【转】火星坐标、百度坐标、WGS-84坐标相互转换及墨卡托投影坐标转经纬度JavaScript版...
- python text insert()背景色_50行python代码写个计算器教程
- Tomcat SSL Configuration
- windows下Redis的安装和使用
- IPTV电视直播系统apk运营—怎么让视频更流畅
- 【db2】db2错误代码大全-SQLCODE
- Day 1:矩阵归零消除序列和
- 离散型随机变量的概率分布
- 2012_WOW_Designing Steganographic Distortion Using Directional Filters
- 第133天学习打卡(Docker 初识Docker Docker的基本组成 安装docker 阿里云镜像加速 Docker常用命令)
- plc远程服务器,PLC远程控制