原型对象
构造函数通过原型分配的函数是所有对象共享的
- JavaScript 规定,每一个构造函数都有一个 prototype 属性,指向另一个对象,所以我们也称为原型对象
- 这个对象可以挂载函数,对象实例化不会多次创建原型上函数,节约内存
- 我们可以把那些不变的方法,直接定义在 prototype 对象上,这样所有的对象的实例就可以共享这些方法。
- 构造函数和原型对象中的this 都指向 实例化的对象
<script>
function Person() {
}
// 每个函数都有 prototype 属性
console.log(Person.prototype)
</script>
了解了 JavaScript 中构造函数与原型对象的关系后,再来看原型对象具体的作用,如下代码所示:
<script>
function Person() {
// 此处未定义任何方法
}
// 为构造函数的原型对象添加方法
Person.prototype.sayHi = function () {
console.log('Hi~');
}
// 实例化
let p1 = new Person();
p1.sayHi(); // 输出结果为 Hi~
</script>
构造函数Person
中未定义任何方法,这时实例对象调用了原型对象中的sayHi
,接下来改动一下代码:
<script>
function Person() {
// 此处定义同名方法 sayHi
this.sayHi = function () {
console.log('嗨!');
}
}
// 为构造函数的原型对象添加方法
Person.prototype.sayHi = function () {
console.log('Hi~');
}
let p1 = new Person();
p1.sayHi(); // 输出结果为 嗨!
</script>
构造函数Person
中定义与原型对象中相同名称的方法,这时实例对象调用则是构造函数中的方法sayHi
。
通过以上两个简单的示例不难发现 Javascript 中对象的工作机制:当访问对象的属性或方法时,先在当前实例对象查找,然后再去原型对象查找,并且原型对象被所有实例共享。
<script>
function Person() {
// 此处定义同名方法 sayHi
this.sayHi = function () {
console.log('嗨!' + this.name)
}
}
// 为构造函数的原型对象添加方法
Person.prototype.sayHi = function () {
console.log('Hi~' + this.name)
}
// 在构造函数的原型对象上添加属性
Person.prototype.name = '小明'
let p1 = new Person()
p1.sayHi() // 输出结果为 嗨!小明
let p2 = new Person()
p2.sayHi() // 输出结果为 嗨!小明
</script>
总结:结合构造函数原型的特征,实际开发中往往会将封装功能的函数添加到原型对象中。
constructor 属性
每个原型对象里面都有个 constructor 属性
作用:该属性指向该原型对象的构造函数
使用场景
如果有多个对象的方法,我们可以给原型对象采取对象形式赋值。
但是这样就会覆盖构造函数原型对象原来的内容,这样修改后的原型对象 constructor 就不在指向当前构造函数了
此时,我们可以再修改后的原型对象中,添加一个 constructor 指向原来的构造函数。
<script>
// constructor 单词 构造函数
function Star() {
}
// Star.prototype.sing = function() {
// console.log('唱歌')
// }
// Star.prototype.dance = function() {
// console.log('跳舞')
// }
Star.prototype = {
// 从新指回创造这个原型对象的 构造函数
constructor: Star,
sing: function() {
console.log('唱歌')
},
dance: function() {
console.log('跳舞')
}
}
console.log(Star.prototype)
// const zs = new Star()
// console.log(Star.prototype)
// console.log(Star.prototype.constructor === Star) // true
</script>
对象原型
对象都会有一个属性__proto__
指向构造函数的 prototype 原型对象,之所以我们对象可以使用构造函数 prototype 原型对象的属性和方法,就是因为对象有__proto__
原型的存在。
注意:
__proto__
是 JS 非标准属性- [[prototype]] 和
__proto__
意义相同 - 用来表明当前实例对象指向那个原型对象prototype
__proto__
对象原型里面也有一个 constructor 属性,指向创建该实力对象的构造函数
原型继承
继承是面向对象编程的另一个特性,通过继承进一步提升代码封装的程度,JavaScript 中大多是借助原型对象实现继承的特性。
<body>
<script>
const Person = {
eays: 2,
head: 1
}
// 女人 构造函数 继承 想要 继承 Person
function Woman() {
// this.eays = 2
// this.head = 1
}
Woman.prototype = Person // {this.eays = 2 this.head = 1}
// 指回原来的构造函数
Woman.prototype.constructor = Woman
// 给女人添加一个方法 生孩子(其他人都不能用的方法)
Woman.prototype.baby = function() {
console.log('生孩子')
}
const red = new Woman()
console.log(red)
// 男人 构造函数 继承 想要 继承 Person
function Man() {
// this.eays = 2
// this.head = 1
}
Man.prototype = Person
Man.prototype.constructor = Man
const zs = new Man()
console.log(zs)
</script>
</body>
这上面 new 出来两个对象实例,给其中一个对象实例添加了方法,但是另外一个对象实例也添加上了同样的方法,如果我只想给其中一个添加,而另外一个不添加,那么可以将代码改成一下形式:
<script>
// 构造函数 new 出来的对象 结构一样,但是对象不一样
function Person() {
this.eays = 2
this.head = 1
}
// 女人 构造函数 继承 想要 继承 Person
function Woman() {
// this.eays = 2
// this.head = 1
}
// Woman 通过原型来继承 Person
// 父构造函数(父类) 子构造函数(子类)
// 子类的原型 = new 父类
// Woman.prototype = Person // {this.eays = 2 this.head = 1}
Woman.prototype = new Person() // {this.eays = 2 this.head = 1}
// 指回原来的构造函数
Woman.prototype.constructor = Woman
// 给女人添加一个方法 生孩子(其他人都不能用的方法)
Woman.prototype.baby = function() {
console.log('生孩子')
}
const red = new Woman()
console.log(red)
// 男人 构造函数 继承 想要 继承 Person
function Man() {
// this.eays = 2
// this.head = 1
}
Man.prototype = new Person()
Man.prototype.constructor = Man
const zs = new Man()
console.log(zs)
</script>
可以将他们公共的内容再次封装成一个构造函数,挂载到原型对象时在 new 出来单独的对象实例就不会指向同一个对象了。
原型链
基本原型对象的继承使得不同构造函数的原型对象关联在一起,并且这种关联的关系是一种链状的结构,我们将原型对象的链状结构关系称为原型链
<script>
// function Object() {}
console.log(Object.prototype)
console.log(Object.prototype.__proto__) // null
function Person() {
}
const zs = new Person()
// console.log(zs.__proto__ === Person.prototype) // true
// console.log(Person.prototype.__proto__ === Object.prototype) // true
console.log(zs instanceof Person) // true
console.log(zs instanceof Object) // true
console.log(zs instanceof Array) // false
console.log([1, 2, 3] instanceof Array) // true
console.log(Array instanceof Object) // true
</script>
- 当访问一个对象的属性(包括方法)时,首先查找这个对象自身有没有该属性。
- 如果没有就查找它的原型(也就是
__proto__
指向的 prototype 原型对象) - 如果还没有就查找原型对象的原型(Object 的原型对象)
- 依次类推,一直找到 Object 为止 (null)
__proto__
对象原型的意义就在于为对象成员查找机制提供一个方向,或者说一条路线- 可以使用
instanceof
运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上