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类的知识相关推荐

  1. typescript学习之路(三) —— ts定义类的方法(包含es5以及es6的定义类)

    提起类,不得不说一下,强类型编程语言,如php,java,c++等都有类的概念.而js作为一门弱类型语言,是没有类这个概念的,虽然也能模拟类的实现,但总归不是类.so,ts也只是模拟类而已,使得更贴切 ...

  2. (语法糖)ES6类class声明类的方式 -ES5类声明继承

    本文将从以下几方面介绍类与继承 类的声明与实例化 如何实现继承 继承的几种方式 类的声明与实例化 类的声明一般有两种方式 // es5和es6声明类的区别,es5没有统一语法规范.es6有统一写法规范 ...

  3. es5和es6声明类的区别/es5和es6继承的区别

    // es5和es6声明类的区别,es5没有统一语法规范.es6有统一写法规范 start. // es5声明"类"的语法--伪类 // function Person(name, ...

  4. typescript学习之路(四) —— ts类的继承(包含es5以及es6的类继承)

    上一文已经写了es5,es6等类的定义,所以本章主要写es5和es6的继承,由于es6的继承和ts的继承如出一辙,只是加了类型定义而已,所以ts的继承稍微写下,不会太详细. 文章目录 es5继承 原型 ...

  5. ES5和ES6的类的区别

    目录 一.写法上面的区别 二.二者的其他区别 1.class 不能提升 2.class只能通过new 实例 3.class的原型上属性不能遍历 4.实现继承的方法不同 一.写法上面的区别 我们用ES5 ...

  6. JS如何定义一个类分别用Es5和Es6来实现

    前言 类是面向对象编程语言最基础,最核心的概念,正因为有了类,才可以拓展延伸出具有相同的属性和函数的对象类 对象的特点,就是它可以拥有属性和方法,而在Es6之前,并没有提供类的支持,它是用构造函数来模 ...

  7. 30分钟搞定ES6常用基础知识

    ES6基础智商划重点 在实际开发中,ES6已经非常普及了.掌握ES6的知识变成了一种必须.尽管我们在使用时仍然需要经过babel编译. ES6彻底改变了前端的编码风格,可以说对于前端的影响非常巨大.值 ...

  8. 从babel实现es6类的继承来深入理解js的原型及继承

    先聊个5毛钱的背景吧 自从有了babel这一个利器之后,es6现在已经被广泛的使用.JavaScript 类实质上是 JavaScript 现有的基于原型的继承的语法糖.类语法不会为JavaScrip ...

  9. ES5和ES6中对于继承的实现方法

    在ES5继承的实现非常有趣的,由于没有传统面向对象类的概念,Javascript利用原型链的特性来实现继承,这其中有很多的属性指向和需要注意的地方. 原型链的特点和实现已经在之前的一篇整理说过了,就是 ...

最新文章

  1. 欢迎来到美多商城!-项目准备之项目介绍-项目需求分析-项目架构设计
  2. (Oracle学习笔记) Oracle概述
  3. 将数组放进集合中的简单方法
  4. SQL 批量插入有标识列的数据
  5. ASP.NET MVC (五、HttpClient接口解析)
  6. wordpress安装及使用
  7. 回归分析假设_回归分析假设的最简单指南
  8. StackExchange.Redis 官方文档(六) PipelinesMultiplexers
  9. 更新FreeBSD Ports的方法
  10. 【转】火星坐标、百度坐标、WGS-84坐标相互转换及墨卡托投影坐标转经纬度JavaScript版...
  11. python text insert()背景色_50行python代码写个计算器教程
  12. Tomcat SSL Configuration
  13. windows下Redis的安装和使用
  14. IPTV电视直播系统apk运营—怎么让视频更流畅
  15. 【db2】db2错误代码大全-SQLCODE
  16. Day 1:矩阵归零消除序列和
  17. 离散型随机变量的概率分布
  18. 2012_WOW_Designing Steganographic Distortion Using Directional Filters
  19. 第133天学习打卡(Docker 初识Docker Docker的基本组成 安装docker 阿里云镜像加速 Docker常用命令)
  20. plc远程服务器,PLC远程控制

热门文章

  1. CSDN 日报第 1 期:蚂蚁集团将向机构投资者退款;Pyston v2 发布 比 Python 快 20%
  2. 优酷响应式在消费场景的落地之 iOS 篇
  3. 注意了!人社部宣布:未来5年,这 10 个新职业有千万缺口
  4. 3年出货5000万颗!国内老牌芯片商用平头哥玄铁处理器研发新芯片
  5. 告别求职难!一汽-大众专场直播招聘来了
  6. 在 Java 虚拟机上班是一种怎样的体验?
  7. 当芯片教父遇上伊隆马斯克:自动驾驶路在何方
  8. 还在用 if else?试试策略模式吧!
  9. 再获全球顶会ASPLOS认可:阿里云神龙凭什么打破物理机神话
  10. 这是一本零基础学习 Python 的好书