ES6学习笔记(2)

1. 构造函数和原型

1.1 概述

在典型的OOP语言中(如JAVA),都存在类的概念,类就是对象的模板,对象就是类的实例,但在ES6之前,JS中并没有引入类的概念

ES6,全称 ECMAScript 6.0 , 2015.06 发版.

在ES6之前,对象不是基于类创建的,而是用一种称为构建函数的特殊函数来定义对象和它们的特征

创建对象可以通过以下三种方式:

1. 对象字面量
2. new Object()
3. 自定义构造函数

1.2 构造函数

构造函数是一种特殊的函数,主要用来初始化对象,即为对象成员变量赋初始值,它总与new一起使用.我们可以把对象中一些公共的属性和方法抽离出来,然后封装到这个函数里面

在JS中,使用构造函数时要注意以下两点:

1. 构造函数用于创建某一类对象,其首字母要大写
2. 构造函数和new一起使用才有意义

new 在执行时会做四件事情:

1. 在内存中创建一个新的空对象
2. 让this指向这个新的对象
3. 执行构造函数里的代码,给这个对象添加属性和方法
4. 返回这个新对象(构造函数中不需要return)

JavaScript的构造函数中可以添加一些成员,可以在构造函数本身上添加,也可以在构造函数内部的this上添加,通过这两种方式添加的成员,就分别称为静态成员和实例成员

• 静态成员: 在构造函数本身上添加的成员称为静态成员,只能通过构造函数本身来访问
• 实例成员: 在构造函数内部创建的对象成员称为实例成员,只能由实例化对象来访问

// 构造函数
function Star (name, age) {
  this.name = name;
  this.age = age;
  this.sing = function () {
    console.log('I can sing');
  }
}
// 实例化对象
const ljj = new Star('林俊杰',18);
// 1. 实例化成员就是构造函数内部通过this添加的成员 name age sing
// 只能通过实例化对象访问
console.log(ljj.name);
console.log(ljj.age);
ljj.sing();
// 2. 静态成员,在构造函数本身添加成员 sex
// 只能通过构造函数来访问
Star.sex = '男';
console.log(Star.sex);

1.3 构造函数的问题

构造函数方法很好用,但存在浪费内存的问题

一般情况下,公共属性定义到构造函数里面,公共的方法放到原型对象身上

1.4 构造函数原型prototype

构造函数通过原型分配的函数是所有对象所共享的

JavaScript规定,每个构造函数都有一个prototype属性,指向另一个对象.注意这个prototype就是一个对象,这个对象的所有属性和方法,都会被构造函数所拥有

我们可以把一些不变的方法,直接定义在prototype对象上,这样所有对象的实例就可以共享这些方法

1. 原型是一个对象,也称prototype为原型对象
2. 原型的作用是共享方法

1.5 对象原型 _proto_

对象都会有一个属性__proto__指向构造函数的prototype原型对象,之所以对象可以使用构造函数prototype原型对象的属性和方法,就是因为对象有proto原型的存在

方法的查找规则:

首先看实例对象上是否有相应方法,如果有直接执行;如果没有,去构造函数原型对象prototype查找

• __proto__对象原型和原型对象prototype是等价的
• __proto__对象原型的意义在于为对象的查找机制提供一个方向,或者说一条路线,但它是一个非标准属性,因此实际开发中,不可以使用该属性,它只是内部指向原型对象prototype

1.6 constructor 构造函数

对象原型(_proto_)和构造函数(prototype)原型对象里都有一个constructor属性, constructor我们称为构造函数,因为它指回构造函数本身

constructor主要用于记录该对象引用于哪个构造函数,它可以让原型对象重新指向原来的构造函数

很多情况下,需要手动利用constructor 这个属性指回原来的构造函数

function Star (name, age) {
  this.name = name;
  this.age = age;
}
// 如果我们修改了原来的原型对象,给对象赋值了一个新的对象,相当于用新的对象覆盖了prototype中的constructor属性,所以需要手动添加
Star.prototype = {
  constructor: Star,
  sing: function() {
    console.log('I can sing')
  },
  movie: function() {
    console.log('I like watching movies')
  }
}

1.7 构造函数,实例,原型对象三者之间的关系

1.8 原型链

1. 只要是对象就有__proto__原型,指向原型对象

2. 构造函数中原型对象里面的__proto__原型指向的是Object.prototype

3. Object.prototype.__proto__指向的是null

1.9 原型对象查找机制

1. 当访问一个属性(包括方法)时,首先查找这个对象自身有没有该属性
2. 没有就查找它的原型(__proto__指向的prototype原型对象)
3. 如果还没有就查找原型对象的原型(Object的原型对象)
4. 依此类推一直找到Object为止(null)
5. __proto__对象原型的意义就在于为对象成员查找机制提供一个方向,或者说一条路线

1.10 this指向问题

1. 构造函数中,this指向的是对象实例
2. 原型对象函数里面的this,指向的是实例对象

1.11 扩展内置对象

可以通过原型对象,对原来的内置对象进行扩展自定义的方法,比如给数组增加自定义求偶数和的功能

2. 继承

ES6之前并未提供extends继承,可以通过构造函数+原型对象模拟实现继承,被称为组合继承

2.1 call()

调用这个函数,并且修改函数运行时的this指向

function.call(thisArg, arg1, arg2, ...)

• thisArg 当前函数this指向

2.2 借用构造函数继承父类型属性

核心原理: 通过call()把父类型的this指向子类型的this,这样就可以实现子类继承父类型的属性

// 借用父构造函数继承属性
// 1. 父构造函数
function Father(name, age) {
  this.name = name;
  this.age = age;
}
// 2. 子构造函数
function Son(name, age) {
  // 将父构造函数中的this指向改为子构造函数中的this指向
  Father.call(this, name, age);
}
// 继承Father中的方法
Son.prototype = new Father();
// 如果利用对象形式修改了原型对象,需要利用constructor指回原来的构造函数
Son.prototype.constructor = Son;

类的本质

1. class本质还是function
2. 类的所有方法都定义在类的prototype属性上
3. 类创建的实例对象有__proto__原型指向类的原型对象
4. ES6的类绝大部分的功能,ES5都可以做到,新的class写法只是让对象原型的写法更加清晰,更像面向对象编程的语法而已
5. ES6的类就是语法糖
6. 语法糖: 语法糖就是一种便捷写法,简单解释,有两种方法可以实现同样的功能,但是一种写法更加清晰,方便,那么这个方法就是语法糖

3. 新增方法

3.1 数组方法

迭代(遍历)方法: forEach(), map(), filter(), some(), every();

forEach():

arr.forEach(function(value, index, arr) {})

filter():

方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素,主要用于筛选数组,直接返回一个新数组

let newArr = arr.filter(function(value, index, arr) {})

some():

方法用于检测数组中的元素是否满足指定条件,返回布尔值,找到一个满足条件的元素,则终止循环,不再继续查找

arr.some(function(value) {})

3.2 字符串方法

tirm():

方法会从一个字符串的两端删除空白字符,并不影响原字符串本身,返回新字符串

Object.defineProperty():

定义对象中新属性或修改原有的属性

Object.defineProperty(obj, prop, descriptor)

• obj 必须,目标对象
• prop: 必须,需定义或修改的属性名
• descriptor: 必须,目标属性所拥有的特性,以对象形式 {} 书写
  • Value: 设置属性的值 默认undefined
  • writable: 值是否可以重写 true | false 默认为false
  • enumerable: 目标属性是否可以被枚举 true | false 默认为false
  • configurable: 目标属性是否可以被删除或者是够可以再次修改特性 true | false 默认为false