一.了解原型对象之前我们得先了解什么是工厂函数.构造函数用法
1.工厂函数
问:什么是工厂函数? 答:用来创建多个对象
function person(name,age){
let p = {}
p.name = name
p.age = age
return p
}
let p1 = person('张三',10)
let p2 = person('李四',20)
let p3 = person('王五',40)
我们用了这个函数可以批量创建对象,每次调用传递参数,把值添加进对象里面然后return返回这个对象.这就像一个工厂一样可以批量创建对象.但是
工厂函数需要创建对象，必须要有返回值,而且工厂函数适应用于小型项目
那么我们就需要用构造函数了,可以比工厂函数更简洁的代码而且不需要写return
2.构造函数
function Person(name, age) {
this.name = name
this.age = age
}
let p1 =new Person('张三', 10)
let p2 =new Person('李四', 20)
let p3 =new Person('王五', 40)
console.log(p1, p2, p3)
现在我们不需要返回值,并且代码更加简洁了,注意构造函数需要加new关键字调用,构造函数首字母大写便于区分普通函数和构造函数.
问:如果构造函数里面每一个对象都有一个相同的方法我们会怎么办
解析1:
function Person(name, age) {
this.name = name
this.age = age
this.dine = function () {
console.log('吃饭');
}
}
let p1 = new Person('张三', 10)
let p2 = new Person('李四', 20)
let p3 = new Person('王五', 40)
console.log(p1, p2, p3)
console.log(p2.dine == p1.dine);
我们控制台查看一下
现在我们的p2和p1dine相等了说明他们共用一个方法
但是我们在构造函数外声明了obj变量,这个变量是全局的,如果是多人开发的大型项目你不能保证你的同事没有声明过和你一样的变量,过多的声明全局变量很容易造成全局变量污染问题
所以我们的原型对象就有了
3.原型对象 同时 解决内存浪费问题 + 全局变量污染问题
了解原型对象:
其实创建函数的时候，系统会自动帮我们创建一个与之对应的对象，称之为原型对象。
接下来我们来使用它
function Person(name, age) {
this.name = name
this.age = age
}
Person.prototype.dine = function () {
console.log('吃饭');
}
let p1 = new Person('张三', 10)
let p2 = new Person('李四', 20)
let p3 = new Person('王五', 40)
console.log(p1, p2, p3)
console.log(p2.dine == p1.dine);
prototype,属于构造函数,指向原型对象
每个函数都默认会有一个属性 prototype 指向了这个对象
所以我们用原型对象就可以轻松解决内存浪费问题 + 全局变量污染问题
问:prototype指向原型对象,那有没有原型对象指向构造函数或者是指向实例对象呢?
答:有,
原型对象.constructor → 自身对应的构造函数
构造函数.prototype →原型对象
实例对象.proto →自身构造函数的原型对象
实例对象就是调用构造函数之后创建的对象
看起来是不是感觉很复杂,不要慌天涯大哥来教你,画个图就简简单单了
prototype:属于构造函数的
constructor属于原型对象的
但是这个属性__proto__是已经不用的很多浏览器也是不显示的但是我们可以了解他的底层原理,可以查看官方文档,mdn官网
