- Javascript规定,每一个构造函数都有一个prototype属性,指向另一个对象,称为原型对象。这个原型对象可以挂载函数,对象实例化不会多次创建原型上的函数,节约内存。
- 可以把不变的方法,直接定义在prototype对象上,这样所有的实例对象就可以共享这些方法。
- 公共的属性定义在构造函数上,公共的方法定义到构造函数的原型对象上。
- 构造函数和原型对象函数中的this都指向实例化的对象。
示例
打印构造函数的prototype属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function Star(uname, age) {
this.uname = uname
this.age = age
this.sing = function () {
console.log('唱歌')
}
}
const star1 = new Star('歌手1', 30)
const star2 = new Star('歌手2', 28)
console.dir(Star.prototype)
</script>
</body>
</html>
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/c5846b4699eb4d19b7792a3928a785ea.png)
在构造函数的原型对象上定义公共的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function Star(uname, age) {
this.uname = uname
this.age = age
}
Star.prototype.sing = function () {
console.log('唱歌')
}
const star1 = new Star('歌手1', 30)
const star2 = new Star('歌手2', 28)
star1.sing()
star2.sing()
console.log(star1.sing === star2.sing)
</script>
</body>
</html>
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/0a5b967f8073438294c5ab56db0b2ce8.png)
构造函数中的this指向实例对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let that
function Star(uname) {
that = this
this.uname = uname
}
const star1 = new Star('歌手1 ')
console.log(that === star1)
</script>
</body>
</html>
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/e1d0d552f911464682b9798250c0fe9b.png)
原型对象函数中的this指向实例对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let that
function Star(uname) {
this.uname = uname
}
Star.prototype.sing = function () {
that = this
console.log('唱歌')
}
const star1 = new Star('歌手1 ')
star1.sing()
console.log(that === star1)
</script>
</body>
</html>
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/07020d2267e3487391021ad6d21cdf18.png)