面向对象编程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： 用于检测某个对象，是否出现在某个实例对象的原型链上（了解）
2015
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
