面向对象编程oop:把事物分成一个个对象,然后通过对象之间分工合作,以对象的功能来划分,而不是步骤
1.object.defineProperty
-
object.defineProperty()方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象
-
可接收三个参数:
obj要定义属性的对象;
prop要定义或修改的属性的名称或 Symbol;
descriptor要定义或修改的属性描述符;
-
返回值:被传递给函数的对象
-
数据属性描述符的四个特性
- configurable(false):该属性不可删除/也不可以重新定义这个属性描述符
- enumerable(false):是否可以枚举
- writable(false):该特性是属性是否可以赋值(写入)
- value(undefined):很多配置,属性的value值,读取属性时会返回该值,修改属性时,会对其进行修改
-
存取属性描述符
- configurable(false):该属性不可删除/也不可以重新定义这个属性描述符
- enumerable(false):是否可以枚举
- get:获取属性时会执行的函数
- set:设置属性时会执行的函数
var obj = { name: "why", age: 18, _address: "北京市" } // 存取属性描述符 // 1.隐藏某一个私有属性不希望直接被外界使用和赋值 // 2.如果我们希望截获某一个属性它访问和设置值的过程时, 也会使用存储属性描述符 Object.defineProperty(obj, "address", { enumerable: true, configurable: true, get: function() { foo() return this._address }, set: function(value) { bar() this._address = value } }) console.log(obj.address) obj.address = "上海市" console.log(obj.address) function foo() { console.log("获取了一次address的值") } function bar() { console.log("设置了addres的值") }
-
定义多个属性描述符
-
对象方法补充
1.获取属性描述符
//获取某一个属性描述符 Object.getOwnPropertyDescriptor(obj,'name') //获取所有属性描述符 Object.getOwnPropertyDescriptors(obj)
2.禁止对象扩展新属性
Object.preventExtensions(obj)
3.密封对象,不允许配置和删除属性
Object.seal(obj)
4.不允许修改现有属性
Object.freeze(obj)
2.创建多个对象
-
字面量、new Object
-
工厂模式
缺点:我们在打印对象时,对象的类型都是Object类型,获取不到对象最真实的类型
-
构造函数
- 认识构造函数:也称为构造器 constructor,通常是我们在创建对象时会调用的函数
- new操作符调用的作用:
- 在内存中创建一个新的对象(空对象);
- 这个对象内部的[[prototype]]属性会被赋值为该构造函数的prototype属性;
- 构造函数内部的this,会指向创建出来的新对象;
- 执行函数的内部代码(函数体代码);
- 如果构造函数没有返回非空对象,则返回创建出来的新对象;
- 构造函数的缺点:构造函数的方式创建对象时,会创建出重复的函数
- 手写
// 手写一个new function myNew(fn, ...args) { // 创建一个空对象 let obj = {} // 使空对象的隐式原型指向原函数的显式原型 obj.__proto__ = fn.prototype // this指向obj let result = fn.apply(obj, args) // 返回 return result instanceof Object ? result : obj }
3.对象的原型
- 认识原型
1.每个对象都有一个特殊的内置属性 [[prototype]],这个特殊的对象可以指向另外一个对象
2.获取的方式:
a) 通过对象的 proto 属性可以获取到(但是这个是早期浏览器自己添加的,存在一定的兼容性问题);
b) 通过 Object.getPrototypeOf 方法可以获取到;
-
函数的原型理解
- 函数也是一个对象,函数作为对象来说,也有一个[[prototype]]隐士原型
- 函数因为是一个函数,还会多出来一个显示原型属性:prototype
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hSlljFJB-1648043242794)(/Users/jiangyutong/Library/Application Support/typora-user-images/image-20211110154639551.png)]
function Person() { } console.log(Person.prototype.constructor) //[[Function:Person]] console.log(p1.__proto__.constructor)//[[Function:Person]] console.log(p1.__proto__.constructor.name)//Person
-
原型(红宝石书)
- 只要创建一个函数,就会为其创建一个protoype属性,这个属性指向该函数的原型对象
- 所有原型对象都会自动获得一个constructor属性,这个属性是 指向prototype所在函数 的指针
- 创建一个自定义的构造函数后,其原型对象默认只会取得constructor属性,其他方法都是从Object上继承来的
- 当调用构造函数创造一个新实例后(new一个新对象)
- 该实例(对象)内部包含一个指针 proto 指向该构造函数的原型对象
多个
__proto__
组成的集合成为原型链instanceof
就是判断某对象是否位于某构造方法的原型链上 -
重写对象
默认情况下,原型的constructor属性是不可枚举的([[Enumerable]]为false)
Person.prototype = {
name:'why',
age:18,
eating: function(){
console.log(this.name + '吃东西')
}
}
//自己写constructor属性
Object.defineProperty(Person.prototype,'constructor',{
enumerable:false,
value:Person
})
- 创建对象-构造函数和原型组合
function Person(name, age, height, address) {
this.name = name
this.age = age
this.height = height
this.address = address
}
Person.prototype.eating = function() {
console.log(this.name + "在吃东西~")
}
Person.prototype.running = function() {
console.log(this.name + "在跑步~")
}
var p1 = new Person("why", 18, 1.88, "北京市")
var p2 = new Person("kobe", 20, 1.98, "洛杉矶市")
p1.eating()//this指向p1
p2.eating()//this指向p2
4.JavaScript原型链
- 从一个对象上获取属性,如果在当前对象中没有获取到就会去他的原型上面获取:
var obj={
name:'why',
age:18
}
obj.__proto__ = {}
obj.__proto__.__proto__ = {}
obj.__proto__.__proto__.__proto__ = {
address = '北京市'
}
- Object原型
- 从Object直接创建出来的对象的原型都是 [Object: null prototype] {}
- [Object: null prototype] {} 原型有什么特殊吗?
特殊一:该对象有原型属性,但是它的原型属性已经指向的是null,也就是已经是顶层原型了;
特殊二:该对象上有很多默认的属性和方法
结论:原型链最顶层的原型对象就是Object的原型对象
5.面向对象的特性-继承
继承能帮我们把重复的代码和逻辑抽取到父类中,子类只需要直接继承过来使用即可
//1.定义父类的构造函数
function Person(){
this.name = 'why'
}
//2.父类原型上添加内容
Person.prototype.eating = function(){
console.log(this.name + 'running')
}
//3.定义子类的构造函数
function Sutudent(){
this.sno = '111'
}
//4.创建父类对象,并且作为子类对象的原型对象
var p = new Person
Student.prototype = p
//5.子类原型上添加内容
Student.prototype.studying = function(){
console.log(this.name + 'studying')
}
- 原型链继承的弊端:某些属性是保存在父类实例对象上的
- 直接打印看不到继承过来的属性的
- 所有新实例都会共享父类实例的属性。(原型上的属性是共享的,一个实例修改了原型属性,另一个实例的原型属性也会被修改)
- 不能给Person(父类)传递参数,因为这个对象是一次性创建的
// 父类: 公共属性和方法
function Person() {
this.name = "why"
this.friends = []
}
Person.prototype.eating = function() {
console.log(this.name + " eating~")
}
// 子类: 特有属性和方法
function Student() {
this.sno = 111
}
var p = new Person()
Student.prototype = p
Student.prototype.studying = function() {
console.log(this.name + " studying~")
}
var stu = new Student
// 原型链实现继承的弊端:
// 1.第一个弊端: 打印stu对象, 继承的属性是看不到的
// console.log(stu.name)
// 2.第二个弊端: 所有新实例都会共享父类实例的属性
var stu1 = new Student()
var stu2 = new Student()
// 直接修改对象上的属性, 是给本对象添加了一个新属性
stu1.name = "kobe"
console.log(stu2.name)
// 获取引用, 修改引用中的值, 会相互影响
stu1.friends.push("kobe")
console.log(stu1.friends)
console.log(stu2.friends)
// 3.第三个弊端: 在前面实现类的过程中都没有传递参数
var stu3 = new Student("lilei", 112)
在子类型构造函数的内部通过call调用父类型构造函数.
//1.定义父类的构造函数
function Person(name, age, firdens){
this.name = name
this.age = age
this.fridens = []
}
//2.父类原型上添加内容
Person.prototype.eating = function(){
console.log(this.name + 'running')
}
//3.定义子类的构造函数
function Sutudent(){
Person.call(this, name, age, firdens)
this.sno = '111'
}
//4.创建父类对象,并且作为子类对象的原型对象
var p = new Person
Student.prototype = p
//5.子类原型上添加内容
Student.prototype.studying = function(){
console.log(this.sno + 'studying')
}
var stu1 = new Student('111','1')
var stu2 = new Student('222','2')
stu1.firdens.push('jyt')
1.借用构造函数继承的弊端:
- 父类构造函数至少被调用两次
- 子类构造函数创建的实例的原型对象上会多出一些没有必要的属性
- 父类的实例上会多出来一些没有必要的属性
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dLGGDmQb-1648043242799)(/Users/jiangyutong/Library/Application Support/typora-user-images/image-20220308182515866.png)]
var obj = {
name: "why",
age: 18
}
// 原型式继承函数
function createObject1(o) {
var newObj = {}
Object.setPrototypeOf(newObj, o)
return newObj
}
function createObject2(o) {
function Fn() {}
Fn.prototype = o
return new Fn()
}
//创建出来的对象,原型指向传进来的这个对象
// var info = createObject2(obj)
var info = Object.create(obj)
console.log(info)
console.log(info.__proto__)
function createObject(o) {
function Fn() {}
Fn.prototype = o
return new Fn()
}
function inheritPrototype(SubType, SuperType) {
SubType.prototype = Object.create(SuperType.prototype)
// 或者SubType.prototype = createObject(SuperType.prototype)
Object.defineProperty(SubType.prototype, "constructor", {
enumerable: false,
configurable: true,
writable: true,
value: SubType
})
}
function Person(name, age, friends) {
this.name = name
this.age = age
this.friends = friends
}
Person.prototype.running = function() {
console.log("running~")
}
function Student(name, age, friends, sno, score) {
Person.call(this, name, age, friends)
this.sno = sno
this.score = score
}
//student.prototypr---->{}----->person.prototype
inheritPrototype(Student, Person)
Student.prototype.studying = function() {
console.log("studying~")
}
var stu = new Student("why", 18, ["kobe"], 111, 100)
console.log(stu)
stu.studying()
stu.running()
stu.eating()
console.log(stu.constructor.name)
es5继承首先是在子类中创建自己的this指向,最后将方法添加到this中
es6继承是使用关键字先创建父类的实例对象this,最后在子类class中修改this
//class 相当于es5中构造函数
//class中定义方法时,前后不能加function,全部定义在class的protopyte属性中
//class中定义的所有方法是不可枚举的
//class中只能定义方法,不能定义对象,变量等
//class和方法内默认都是严格模式
//es5中constructor为隐式属性
class People{
constructor(name='wang',age='27'){
this.name = name;
this.age = age;
}
eat(){
console.log(`${this.name} ${this.age} eat food`)
}
}
//继承父类
//在子类的构造函数中使用this或者返回默认对象之前,必须先通过super调用父类的构造函数!
class Woman extends People{
constructor(name = 'ren',age = '27'){
//继承父类属性
super(name, age);
}
eat(){
//继承父类方法
super.eat()
}
}
let wonmanObj=new Woman('xiaoxiami');
wonmanObj.eat();
6.对象方法的补充
- hasOwnProperty:对象是否有某一个属于自己的属性(不是在原型上的属性)
- in/for in 操作符:判断某个属性是否在某个对象或者对象的原型上
- instanceof:用于检测构造函数的pototype,是否出现在某个实例对象的原型链上;只能判断某对象是否存在于目标对象得的原型链上
- isPrototypeOf: 用于检测某个对象,是否出现在某个实例对象的原型链上(了解)