theme: channing-cyan highlight: agate
1.介绍
在介绍new之前先给大家介绍一下原型以及实例 构造函数,可能更好理解
实例化: 通过构造函数创建对象的过程就叫做实例化
实例: 实际的例子,具体的某一个对象
2.原型
1. 每个函数(除了箭头函数 所以箭头不能加new调用)都有prototype属性,它的值是一个指针,指向的就是原型对象
2. 通过构造函数生成的实例,都有一个__proto__属性,也指向原型对象
3. 原型对象上默认有一个constructor属性,指回构造函数
**原型的作用**
1. 我们可以把一些公共的属性和方法放到原型上
2. 通过构造函数创建的实例,都共享原型上的属性和方法
3.构造函数 原型 实例的关系
1. 当new时,构造函数实例化了对象 这个对象我们把它叫做实例
2. 构造函数中的prototype属性指向原型对象
3. 原型对象里面有constructor属性指回构造函数
4. 实例中的隐式原型(__proto_)指向构造函数的原型对象
构造函数规范
1. 构造函数名字首字母一般要大写(为了从视觉上区分构造函数和普通函数)
2. 构造函数里 属性和方法前面必须添加 this
3. 构造函数不需要 return 就可以返回结果(构造函数的返回值即为新创建的对象)
4. 我们调用构造函数 必须使用 new
4.原型的五大规则
1. 所有的引用类型(数组对象函数),都具有对象的特性,可以自由的扩展属性。
const obj = {} // obj.a = 1
const arr = [] // arr.b = 2
const fn = function(){} // fn.c = 3
2. 所有的对象,都有一个__proto__属性,属性值是一个普通的对象。 (__proto__ 隐式原型)
console.log(obj.__proto__)
console.log(arr.__proto__)
console.log(fn.__proto__)
3. 所有的函数,都有一个prototype属性,属性值也是一个普通的对象 (prototype 显示原型)
console.log(fn.prototype)
4. 所有对象的隐式原型(__proto__) 指向它的构造函数的显示原型(prototype)
obj.__proto__ === Object.prototype
arr.__proto__ === Array.prototype
fn.__proto__ === Function.prototype
5. 当试图得到一个对象的某个属性时,如果这个对象本身没有这个属性,那么会去它的__proto__中寻找(这也是我们原型链的原理)
在我们手写一个new前,先介绍一下new的执行过程
1.首先会创建一个空对象 obj
2.给这个obj对象加__proto__属性,链接构造函数的prototype
3.构造函数调用call()方法 参数是创建的对象,让当前构造函数的执行上下文中的this环境指向这个对象
4.执行构造函数里面的代码
6.判断构造函数中有没有return 有return的话,返回return后面的
5.没有return 返回这个新创建的对象
5.手写new
1.创建我们的构造函数 Fn
function Fn(name, age){
// const obj = {}
this.name = name
this.age = age
// 看它内部有没有return对象或者函数,
}
// Fn 就相当于是我们要new 的构造函数
myNew是我们实现一个new的函数
function myNew(fn, ...args){
1. 创建一个空对象
const obj = {} // 或者new Object()
2.让这个对象的隐式原型(__proto__)指向构造函数的显示原型(prototype)
obj.__proto__ = Fn.prototype
// Object.create基于fn构造函数原型创建一个新对象 ==> 让 fn.prototype作为 obj的原型
//Object.create相当于把上面2个步骤一步实现了
// let obj = Object.create(fn.prototype)
// 2. 执行构造函数,并且让它内部的this指向我们的obj
let res = fn.call(obj, ...args)
//res是构造函数的返回值
// 3. 看Fn调用后有没有返回结果,有,说明Fn构造函数内部有return ,返回res
if (res && (typeof res === 'object' || typeof res === 'function')) return res
//Fn调用没有返回值则返回我们创建的对象
return obj // ==》obj就是我们最后要的实例
}
const res = myNew(Fn, '淞', '3')
console.log(res.__proto__ === Fn.prototype) //true
console.log(res) //我们最后创建的实例对象
6.class类
class类其实是构造函数的语法糖,构造函数的功能它都有,简化了方法的属性,在class中可以直接写方法,而构造函数中需要一个一个的往原型上加
1. 通过class 关键字创建类, 类名我们还是习惯性定义首字母大写
2. 类里面有个constructor 函数,可以接受传递过来的参数,同时返回实例对象
3. constructor 函数 只要 new 生成实例时,就会自动调用这个函数, 如果我们不写这个函数,类也会自动生成这个函数