ES6 class-数值扩展-方法扩展
目录
class 类
ES6 声明类
class 类静态成员
ES5 构造函数继承
ES6 类继承
子类对父类方法的重写
class 中 getter 和 setter 设置
数值扩展
Number.EPSILON
二进制和八进制
Number.isFinite
Number.isNaN
Number.parseInt
Number.parseFloat
Number.isInteger
Math.trunc
Math.sign
对象方法扩展
Object.is
Object.assign
Object.setPrototypeof
Object.getPrototypeof
class 类
ES6 提供了更接近传统语言的写法，引入了 Class（类）的概念，作为对象的模板
通过 class 关键字，可以定义类
基本上，ES6 的 class 可以看作是一个语法糖，它的绝大部分功能，ES5都可以实现
新的 class 写法只是让对象圆形的写法更加清晰、更像面向对象编程的语法而已
知识点：
- class 声明类
- constructor 定义构造函数初始化
- extends 继承父类
- super 调用父级构造方法
- static 定义静态方法和属性
- 父类方法可以重写
ES6 声明类
// 手机
// ES5 声明 class 方法
function Phone(brand, price) {
this.brand = brand
this.price = price
}
// 添加方法
Phone.prototype.call = function () {
console.log('打电话')
}
// 实例化对象
let Huawei = new Phone('华为', 5999)
// 调用方法
Huawei.call() // 打电话
console.log(Huawei) // Phone {brand: "华为", price: 5999}
// ES6 声明方法
class Phone1 {
// 构造方法 constructor
// 该方法在类执行 new+类名时，就会自动执行实例对象的 constructor 方法
constructor(brand, price) {
// 添加属性
this.brand = brand
this.price = price
}
// 添加方法,方法必须使用该语法，不能使用 ES5 的对象完整形式
call() {
console.log('听音乐')
}
}
let hongmi = new Phone1('红米k40', 2499)
console.log(hongmi) // Phone1 {brand: "红米k40", price: 2499}class 类静态成员
- 添加属性或方法要添加到原型上（prototype），实例对象是通过原型链去找属性或方法的
- 函数的静态成员只属于函数对象本身（类），不属于实例对象
- 函数对象和实例对象的属性和方法不是相通的
- 实例对象和构造函数原型的属性和方法是相通的
// ES5 构造函数
function Phone() {}
// Phone.name 和 Phone.price 只属于函数对象（类），并不属于实例对象
// 对于这样的属性，我们称之为静态成员
Phone.myname = 'vivo'
Phone.price = function () {
console.log('vivoZ10 仅售2499')
}
// 实例对象
let vivo = new Phone()
console.log(vivo.myname) // undefined，实例对象并没有构造函数对象上的属性
console.log(Phone.myname) // vivo，意味着实例对象和函数对象的属性是不通的
// vivo.price(); // 方法也没有,提示 price 并不是一个函数
// 实例对象与构造函数原型对象是相通的
// 构造函数原型对象
Phone.prototype.myname = 'vivoX10'
Phone.prototype.mysize = '5.5inch'
let vivo1 = new Phone()
console.log(vivo1.myname) // vivoX10
console.log(vivo1.mysize) // 5.5inch
console.log(Phone.mysize) // undefined
// ES6 构造函数
class shouji {
// static 静态成员
static myname = '苹果'
static functions() {
console.log('打电话，听音乐')
}
}
let iPhone = new shouji()
console.log(iPhone.myname) // undefined
console.log(shouji.myname) // 苹果
// 再次证明，static 标注的属性和方法属于类，但不属于实例对象ES5 构造函数继承
// 手机
function Phone(brand, price) {
this.brand = brand
this.price = price
}
Phone.prototype.functions = function () {
console.log('打电话，听音乐')
}
// 以上是父级构造函数
// 声明一个子级构造函数
// 智能手机
function SmartPhone(brand, price, color, size) {
// 调用父级构造函数初始化代码，两个 this
Phone.call(this, brand, price) // Phone 通过 call 方法改变 this 值
// 此处的 this 指向 SmartPhone 里面的 this ,即 SmartPhone 中的一个实例对象
// 继承父级构造函数的 brand 和 price 属性
this.color = color
this.size = size
}
// 设置子级构造函数的原型
SmartPhone.prototype = new Phone() // 如此，子级的实例对象就会有父级的属性和方法
SmartPhone.prototype.constructor = SmartPhone // 校正，可有可无
// 声明子类的方法
SmartPhone.prototype.photo = function () {
console.log('拍照')
}
SmartPhone.prototype.game = function () {
console.log('玩游戏')
}
// 实例化
const chuizi = new SmartPhone('锤子', 2499, '黑色', '5.5inch')
console.log(chuizi)
// SmartPhone {brand: "锤子", price: 2499, color: "黑色", size: "5.5inch"}
ES6 类继承
class Phone {
// 构造方法
constructor(brand, price) {
this.brand = brand
this.price = price
}
// 父类的成员属性
functions() {
console.log('打电话')
}
}
// 声明子类
class SmartPhone extends Phone {
// 构造方法,里面包含子类中实例化值的初始化参数
constructor(brand, price, color, size) {
// 调用父类的构造方法初始化
super(brand, price) // 功能与 Phone.call(this, brand, price) 相同
this.color = color
this.size = size
}
photo() {
console.log('拍照')
}
game() {
console.log('玩游戏')
}
}
// 实例化
const xiaomi = new SmartPhone('小米', 2499, '黑色', '5.5inch')
console.log(xiaomi)
// SmartPhone {brand: "小米", price: 2499, color: "黑色", size: "5.5inch"}
xiaomi.functions() // 打电话
xiaomi.photo() // 拍照
xiaomi.game() // 玩游戏子类对父类方法的重写
class Phone {
// 父类的成员属性
functions() {
console.log('打电话')
}
}
// 声明子类
class SmartPhone extends Phone {
// 重写 functions 方法
functions() {
// 注意，在 JS 中，子类不能直接调用父类的同名方法
// 此处也不可以使用 super()
// super() 是父类构造方法，只在创建对象时使用
// 通过 super() 方法调用 call() 方法
// 因此只能重写父类方法
console.log('视频/语音通话')
}
}
// 实例化
xiaomi.functions() // 视频/语音通话class 中 getter 和 setter 设置
- 对对象的属性进行方法的绑定
- 对某一个属性进行获取，执行 get 函数
- 封装对象的动态属性，属性值随着数据的变化而变化，动态获取数据
- 对某一个属性进行设置，执行 set 函数
- 添加更多的控制和判断，成功赋值，失败跳过
数值扩展
Number.EPSILON
- Number.EPSILON 是 JavaScript 表示的最小精度
- EPSILON 属性的直接接近于 2.22*10^(-16)
- 如果两个数的差值小于 Number.EPSILON，就认为两个数相等
- 主要用于浮点数运算中的精度设置
// Number.EPSILON
function equal(a, b) {
if (Math.abs(a - b) < Number.EPSILON) {
return true
} else {
return false
}
}
console.log(0.1 + 0.2 === 0.3) // false
console.log(equal(0.1 + 0.2, 0.3)) // true二进制和八进制
- 二进制表示方式：0b
- 八进制表示方式：0o
- 十进制
- 十六进制：0x
// 二进制
let two = 0b1010
console.log(two)
// 八进制
let eight = 0o777
console.log(eight)
// 十进制
let ten = 100
console.log(ten)
// 十六进制
let sixteen = 0xff
console.log(sixteen)Number.isFinite
- 检测一个数值是否为有限数
// Number.isFinite 检测一个数值是否为有限数
console.log(Number.isFinite(100)) // true
console.log(Number.isFinite(100 / 3)) // true
console.log(Number.isFinite(100 / 0)) // true
console.log(Number.isFinite(Infinity)) // trueNumber.isNaN
- 检测一个数值是否为 NaN
// Number.isNaN 检测一个数值是否严格等于 NaN
console.log(Number.isNaN(100)) // false
console.log(Number.isNaN('100')) // false
console.log(Number.isNaN('str')) // falseNumber.parseInt
Number.parseFloat
- 字符串转为数值型
- 一个字符串中包含数字时，如果字符串的首位为数字，则输出该数字及与该数字相连的数字，且之后的内容截断不输出
- 如果字符串首位不为数字，则输出 NaN
// Number.parseInt Number.parseFloat 字符串转为整型
console.log(Number.parseInt('521zdn')) // 521
console.log(Number.parseInt('zdn521')) // NaN
console.log(Number.parseFloat('5.21zdn')) // 5.21
console.log(Number.parseFloat('zdn5.21')) // NaNNumber.isInteger
- 判断一个数是否为整数
// Number.isInteger 判断一个数是否为整数
console.log(Number.isInteger(100)) // true
console.log(Number.isInteger(100.1)) // false
console.log(Number.isInteger('100')) // false
console.log(Number.isInteger('hello')) // falseMath.trunc
- 将数字的小数部分抹掉
// Math.trunc 将数字小数部分抹掉
console.log(Math.trunc(5.21)) // 5
console.log(Math.trunc('5.21')) // 5
console.log(Math.trunc('5.21 hello')) // NaN
console.log(Math.trunc('hello')) // NaNMath.sign
- 判断一个数到底为正数、负数、还是零
// Math.sign 判断一个数到底为正数、负数、零
console.log(Math.sign(10)) // 1
console.log(Math.sign(0)) // 0
console.log(Math.sign(-99)) // -1对象方法扩展
Object.is
- 判断两个值是否完全相等
- 与全等很像，但并不完全相同
- 在判断 NaN 与 NaN 是否全等的时候，结果并不一致
// Object.is 判断两个值是否完全相等
// 与全等很像但并不是完全相同
console.log(Object.is(120, 120)) // true
console.log(Object.is(NaN, NaN)) // true
console.log(Object.is('hello', 'hello')) // true
console.log(Object.is('hello', 'world')) // false
// NaN 不等于 任何数值
console.log(120 === 120) // true
console.log(NaN === NaN) // false
console.log('hello' === 'hello') // true
console.log('hello' === 'world') // falseObject.assign
- 对象的合并
- 经常用于配置的合并
- 合并的两个对象，后者将覆盖前者重名的属性，不重名的属性将被保留
// Object.assign 对象的合并
// 经常用于配置的合并
// 合并的两个对象,后者会覆盖前者重名的属性,不重名的属性将会被保留
const config1 = {
host: 'localhost',
port: 3306,
name: 'root',
password: 'root',
test: 'test',
}
const config2 = {
host: 'http://www.jnshu.com/',
port: 3307,
name: 'IT 修真院',
password: 'root',
}
// 括号中的两个参数,第一个为被覆盖对象,第二个为覆盖对象
const config = Object.assign(config1, config2)
console.log(config) // 输出结果为 config2
// {host: "http://www.jnshu.com/", port: 3307, name: "IT 修真院", password: "root", test: "test"}Object.setPrototypeof
Object.getPrototypeof
- 设置原型对象与获取原型对象
- 虽然此方法可以改变对象的原型，但并不建议这样做
- 正确的做法还是通过 Object.creat 创建对象时就设置好原型，效率更高
// Object.setPrototypeOf 设置原型对象
const school = {
name: 'imau',
}
const campus = {
xiaoqu: ['西区', '东区', '南区', '新区'],
}
// 为 school 设置原型 Object.getPrototypeOf 获取原型
// 将第二个参数插入第一个参数中作为原型
Object.setPrototypeOf(school, campus)
console.log(Object.getPrototypeOf(school)) // {xiaoqu: Array(4)}
// 获取到的是 school 的原型 campus
console.log(school) // {name: "imau"}
// 虽然可以通过这样的方式改变对象的原型,但是并不建议这样做
// 正确的做法还是通过 Object.create 创建对象时就将原型设置好
// 效率更高