16.面向对象(4)——构造函数的不合理

//准备一个构造函数
function Person (name,age){
  this.name = name
  this.age= age
  this.sayHi = function (){console.log('hello world')}
}

//调用构造函数,创建对象
var p1 = new Person('jack',18)
var p2 = new Person('rose',20)

//调用两个对象的 sayHi 方法
p1.sayHi()
p2.sayHi()
console.log(p1 == p2) //false,是两个对象
console.log(p1.sayHi == p2.sayHi) //false,是两个函数
构造函数的不合理:
  • 当你在构造函数内书写方法后,在调用阶段,只要创建一次对象,就会有一个函数在占用空间
  • 创建100次对象,会有100个一模一样的函数出现,里面有99个是重复的,没有必要存在

为了解决构造函数的不合理,我们引入了原型

原型

定义:每个函数天生自带一个属性,叫做 prototype,是一个对象。

构造函数也是函数,也会有这个自带的空间 prototype

function Person (){
  console.log(Person.prototype)
}

既然 prototype 是一个对象,我们就可以使用对象操作的语法,向里面添加一些内容

每一个对象,在你访问它的成员的时候,如果自己没有这个属性,会自动去所属构造函数的 prototype 上查找
构造函数在创建对象的过程,我们起名为 实例化 的过程
创建出来的对象叫做这个构造函数的一个 实例化对象

function Person (){}

//向 prototype 里面添加一个叫sayHi的方法
Person.prototype.sayHi = function (){console.log('我是 Person 原型上的方法')}

//创建一个实例化对象
var p1 = new Person()

//因为 p1 是 Person 实例化出来的对象,p1 就是属于 Person 这个构造函数的
//当你访问 p1 的 sayHi 成员时,p1 自己是没有的,会自动去 Person 的原型(prototype)上查找
p1.sayHi()

// p1 的 sayHi 方法和 p2 的 sayHi 方法都是使用 Person 的原型上的方法
//我们只要向 Person 的原型上添加一些方法,Person 的每一个实例都可以使用
//并且使用的都是同一个函数,不会出现浪费空间的行为
var p2 = new Person()
p2.sayHi()

console.log( p1.sayHi === p2.sayHi) //true,说明是一个函数

构造函数要生产有属性有方法的合理的对象
属性:直接写在构造函数体内
方法:写在构造函数的原型上

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容