面向对象是什么?
面向对象是用 JS 完成需求的一种思想,注重得到一个对象,这个对象就是我们的需求,关注的是对象,起到多次复用的效果
面向对象的原型:
什么是原型?
每一个函数,天生拥有一个属性 prototype,属性值是一个对象,可以用这个属性给对象里面添加属性值,通常会把这个对象叫做 这个函数的原型对象
prototype 原型对象中有一个属性叫做 constructor,这个属性表示的是 当前的 这个原型 是 哪个函数 的原型
如何使用原型中的属性?
每一个对象,天生拥有一个属性 __proto__(前后都是两个下划线),这个属性指向自己构造函数的原型
function Person() {}
Person.prototype.age = 18
Person.prototype.name = 'abc'
Person.prototype.fn = function() {
console.log('我是添加在 Person 函数原型上的 fn函数')
}
let obj = new Person() // 使用 new 结合 Person 这个过程叫做构造函数的实例化,obj 是实例化对象
console.log(Person.prototype) // 打印的是这个函数的原型对象
console.log(obj.constructor) // 打印的是当前这个当前的这个原型是哪个函数的原型
console.log(obj.__proto__) // 打印的是当前这个实例化对象的构造函数的原型对象
console.log(Person.prototype === obj.__proto__) // true,因为当前这个obj的构造函数是Person
原型的作用:
把构造函数的 公共方法 提取出来,放在原型中
为什么要这样做
构造函数原型上的方法或者属性,在每一个实例化对象中都能访问
对象的访问规则:
访问对象的某一个属性时,会先在对象自身进行查找,找到就直接使用,如果没有找到,那么会去对象的 __proto__中查找,找到就直接使用,如果没有找到,那么就会去这个对象的原型对象的 __proto__查找,直到找到 JS 的顶层对象 Object.prototype ,如果还没找到,那么停止,返回 null
function Person(name,age) {
this.name = name
this.age = age
}
Person.prototype.SayHi = function(){
console.log('你好呀~~~')
}
let p = new Person('abc',18)
console.log(p.__proto__)
1. p的__proto__指向谁?
__proto__ 是指向自己构造函数的原型
p 的构造函数是 Person,那么相当于指向了 Person 的原型
所以 p__proto__ === Person.prototype
2. Person 的 __proto__ 指向谁
Person 是一个构造函数,构造函数本质上就是一个函数而已
_proto__ 是指向自己构造函数的原型
在 JS 中,只要是一个函数,那么就属于构造函数 Function 的实例化对象
Person.__proto__ === Function.prototype
3. Person.prototype 的 __ proto__ 指向谁
Person.prototype 是 Person 函数的构造原型,本质上就是一个对象
在 JS 中,只要是一个对象,那么就属于构造函数 Object 的实例化对象
Person.prototype.__proto__ === Object.prototype
4. Function 的 __proto__ 指向谁
Function 是一个构造函数,本质上就是一个函数而已
_proto__ 是指向自己构造函数的原型
在 JS 中,只要是一个函数,那么就属于构造函数 Function 的实例化对象
Function.__proto__ === Function.prototype
5: Function.prototype 的 __proto 指向谁
Function.prototype 是 Function 函数的构造原型,本质上就是一个对象
_proto__ 是指向自己构造函数的原型
在 JS 中,只要是一个对象,那么就属于构造函数 Object 的实例化对象
Function.prototype.__proto__ === Object.prototype
6. Object 的 __proto__ 指向谁
Object 是一个构造函数,构造函数本质上就是一个函数
在 JS 中,只要是一个函数,那么就属于构造函数 Function 的实例化对象
__proto__ 指向自己构造函数的原型
Object.__proto__ === Function.prototype
7: Object.prototype 的 __proto__ 指向谁
因为 Object.prototype 是 JS 中的顶层对象,再往上就没有了,所以这个值为 null
console.log(Object.prototype.__proto__) // null
