原型

前端菜市场
87 阅读5分钟

构造函数

封装是面向对象思想中比较重要的一部分，js面向对象可以通过构造函数实现的封装。

同样的将变量和函数组合到了一起并能通过 this 实现数据的共享，所不同的是借助构造函数创建出来的实例对象之间是彼此不影响的

function Star (uname, age) {
  this.uname = uname
  this.age = age
  this.sing = function () {
    console.log('唱歌')
  }
}
//实例对象，获得了构造函数中封装的所有逻辑
const ldh = new Star('刘德华', 55)
const zxy = new Star('张学友', 58)
ldh.sing() //调用
zxy.sing() //调用

总结：

  1. 构造函数体现了面向对象的封装特性

  2. 构造函数实例创建的对象彼此独立、互不影响

  3. 构造函数方法很好用，但是 存在浪费内存的问题

image.png

原型可以解决浪费内存的问题

原型

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

JavaScript 规定，每一个构造函数都有一个 prototype 属性，指向另一个对象，所以也称为原型对象

这个对象可以挂载函数，对象实例化不会多次创建原型上函数，节约内存

可以把那些不变的方法，直接定义在 prototype 对象上，这样所有对象的实例就可以共享这些方法。

image.png

// 1.公共的属性写到 构造函数里面
function Star(uname, age) {
  this.uname = uname
  this.age = age
}
// 2. 公共的方法写到原型对象身上   节约了内存
Star.prototype.sing = function () {
  console.log('唱歌')
}
const ldh = new Star('刘德华', 55)
const zxy = new Star('张学友', 58)
ldh.sing() //调用
zxy.sing() //调用
console.log(ldh.sing === zxy.sing)  // true

constructor 属性

每个原型对象里面都有个constructor 属性（constructor 构造函数）

作用： 该属性指向该原型对象的构造函数， 简单理解，就是指向我的爸爸，我是有爸爸的孩子

使用场景：

如果有多个对象的方法，我们可以给原型对象采取对象形式赋值.

但是这样就会覆盖构造函数原型对象原来的内容，这样修改后的原型对象 constructor 就不再指向当前构造函数了

此时，我们可以在修改后的原型对象中，添加一个 constructor 指向原来的构造函数。

对象原型

构造函数可以创建实例对象，构造函数还有一个原型对象，一些公共的属性或者方法放到这个原型对象身上

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

image.png

注意：

__proto__ 是JS非标准属性

[[prototype]]和__proto__意义相同

用来表明当前实例对象指向哪个原型对象prototype

__proto__对象原型里面也有一个 constructor属性，指向创建该实例对象的构造函数

image.png

function Star () {}
const ldh = new Star()
console.log(ldh.__proto__)
// 对象原型__proto__ 指向 改构造函数的原型对象
console.log(ldh.__proto__ === Star.prototype)   // true
// 对象原型里面有constructor 指向 构造函数 Star
console.log(ldh.__proto__.constructor === Star)   // true

image.png

原型继承

继承是面向对象编程的另一个特征，通过继承进一步提升代码封装的程度，JavaScript 中大多是借助原型对象实现继承的特性。

首先，有一段代码，定义了一个男人，一个女人

image.png

  1. 封装-抽取公共部分

把男人和女人公共的部分抽取出来放到人类里面

image.png

  1. 继承-让男人和女人都能继承人类的一些属性和方法

把男人女人公共的属性和方法抽取出来 People

然后赋值给Man的原型对象，可以共享这些属性和方法

注意让constructor指回Man这个构造函数

image.png

如果我们给男人添加了一个吸烟的方法，发现女人自动也添加这个方法

image.png

  1. 问题：--原因

男人和女人都同时使用了同一个对象，根据引用类型的特点，他们指向同一个对象，修改一个就会都影响

image.png

  1. 解决：

需求：男人和女人不要使用同一个对象，但是不同对象里面包含相同的属性和方法

答案：构造函数

new 每次都会创建一个新的对象

image.png

继承完善写法

function Person() {
  this.eyes = 2
  this.head = 1
}
// console.log(new Person)

// 女人  构造函数   继承  想要 继承 Person
function Woman() {}
// Woman 通过原型来继承 Person
// 父构造函数（父类）   子构造函数（子类）
// 子类的原型 =  new 父类  
Woman.prototype = new Person()   // {eyes: 2, head: 1} 
// 指回原来的构造函数
Woman.prototype.constructor = Woman

// 给女人添加一个方法  生孩子
Woman.prototype.baby = function () {
  console.log('宝贝')
}
const red = new Woman()
console.log(red)
// console.log(Woman.prototype)

// 男人 构造函数  继承  想要 继承 Person
function Man() {}
// 通过 原型继承 Person
Man.prototype = new Person()
Man.prototype.constructor = Man
const pink = new Man()
console.log(pink)

原型链

基于原型对象的继承使得不同构造函数的原型对象关联在一起，并且这种关联的关系是一种链状的结构，我们将原型对象的链状结构关系称为原型链

image.png

原型链-查找规则

① 当访问一个对象的属性（包括方法）时，首先查找这个对象自身有没有该属性。

② 如果没有就查找它的原型（也就是 __proto__ 指向的 prototype 原型对象）

③ 如果还没有就查找原型对象的原型（Object的原型对象）

④ 依此类推一直找到 Object 为止（null）

⑤ __proto__对象原型的意义就在于为对象成员查找机制提供一个方向，或者说一条路线

avatar
文章
阅读
粉丝