三、面向对象高级

此部分要求你对前方函数高级部分的1、原型与原型链比较熟悉,如果掌握不够好理解会相对困难

1、对象创建模式

Ⅰ-Object构造函数模式

方式一: Object构造函数模式

套路: 先创建空Object对象, 再动态添加属性/方法

适用场景: 起始时不确定对象内部数据

问题: 语句太多
/*一个人: name:"Tom", age: 12*/
// 先创建空Object对象
var p = new Object()
p = {} //此时内部数据是不确定的
// 再动态添加属性/方法
p.name = 'Tom'
p.age = 12
p.setName = function (name) {this.name = name
}//测试
console.log(p.name, p.age)
p.setName('Bob')
console.log(p.name, p.age)

Ⅱ-对象字面量模式

方式二: 对象字面量模式

套路: 使用{}创建对象, 同时指定属性/方法

适用场景: 起始时对象内部数据是确定的

问题: 如果创建多个对象, 有重复代码
//对象字面量模式
var p = {name: 'Tom',age: 12,setName: function (name) {this.name = name}
}
//测试
console.log(p.name, p.age)
p.setName('JACK')
console.log(p.name, p.age)var p2 = {  //如果创建多个对象代码很重复name: 'Bob',age: 13,setName: function (name) {this.name = name}
}

Ⅲ-工厂模式

方式三: 工厂模式

套路: 通过工厂函数动态创建对象并返回
适用场景: 需要创建多个对象
问题: 对象没有一个具体的类型, 都是Object类型

//返回一个对象的函数===>工厂函数
function createPerson(name, age) {
var obj = {name: name,age: age,setName: function (name) {this.name = name}
}
return obj
}// 创建2个人
var p1 = createPerson('Tom', 12)
var p2 = createPerson('Bob', 13)// p1/p2是Object类型function createStudent(name, price) {var obj = {name: name,price: price
}
return obj
}
var s = createStudent('张三', 12000)
// s也是Object

Ⅳ-自定义构造函数模式

方式四: 自定义构造函数模式

套路: 自定义构造函数, 通过new创建对象

适用场景: 需要创建多个类型确定的对象,与上方工厂模式有所对比

问题: 每个对象都有相同的数据, 浪费内存
  //定义类型function Person(name, age) {this.name = namethis.age = agethis.setName = function (name) {this.name = name}}var p1 = new Person('Tom', 12)p1.setName('Jack')console.log(p1.name, p1.age)console.log(p1 instanceof Person)function Student(name, price) {this.name = namethis.price = price}var s = new Student('Bob', 13000)console.log(s instanceof Student)var p2 = new Person('JACK', 23)console.log(p1, p2)

Ⅴ-构造函数+原型的组合模式

方式五: 构造函数+原型的组合模式–>最好用这个写法

套路: 自定义构造函数, 属性在函数中初始化, 方法添加到原型上

适用场景: 需要创建多个类型确定的对象

放在原型上可以节省空间(只需要加载一遍方法)
  //在构造函数中只初始化一般函数function Person(name, age) {this.name = namethis.age = age}Person.prototype.setName = function (name) {this.name = name}var p1 = new Person('Tom', 23)var p2 = new Person('Jack', 24)console.log(p1, p2)

2、继承模式

Ⅰ-原型链继承

方式1: 原型链继承

套路

定义父类型构造函数

给父类型的原型添加方法

定义子类型的构造函数

创建父类型的对象赋值给子类型的原型

将子类型原型的构造属性设置为子类型–>此处有疑惑的可以看本笔记函数高级部分的1、原型与原型链

给子类型原型添加方法

创建子类型的对象: 可以调用父类型的方法

关键
子类型的原型为父类型的一个实例对象
//父类型
function Supper() {this.supProp = '父亲的原型链'
}
//给父类型的原型上增加一个[showSupperProp]方法,打印自身subProp
Supper.prototype.showSupperProp = function () {console.log(this.supProp)
}//子类型
function Sub() {this.subProp = '儿子的原型链'
}// 子类型的原型为父类型的一个实例对象
Sub.prototype = new Supper()
// 让子类型的原型的constructor指向子类型
// 如果不加,其构造函数找的[`new Supper()`]时从顶层Object继承来的构造函数,指向[`Supper()`]
Sub.prototype.constructor = Sub
//给子类型的原型上增加一个[showSubProp]方法,打印自身subProp
Sub.prototype.showSubProp = function () {console.log(this.subProp)
}var sub = new Sub()sub.showSupperProp() //父亲的原型链
sub.showSubProp() //儿子的原型链
console.log(sub)
/**
Sub {subProp: "儿子的原型链"}
subProp: "儿子的原型链"
__proto__: Supper
constructor: ƒ Sub()
showSubProp: ƒ ()
supProp: "父亲的原型链"
__proto__: Object
*/

① 示例图

注意:此图中没有体现[constructor构造函数 ],会在下方构造函数补充处指出

② 构造函数补充

对于代码中[Sub.prototype.constructor = Sub]是否有疑惑?

如果不加,其构造函数找的[new Supper()]是从顶层Object继承来的构造函数,指向[Supper()],虽然如果你不加这句话,大体上使用是不受影响的,但是你有一个属性指向是错误的,如果在大型项目中万一万一哪里再调用到了呢?

这里可以补充一下constructor 的概念：

constructor 我们称为构造函数，因为它指回构造函数本身

其作用是让某个构造函数产生的所有实例对象（比如f）能够找到他的构造函数（比如Fun），用法就是f.constructor

此时实例对象里没有constructor 这个属性，于是沿着原型链往上找到Fun.prototype 里的constructor，并指向Fun 函数本身

constructor本就存在于原型中,指向构造函数,成为子对象后，如果该原型链中的constructor在自身没有而是在父原型中找到,所以指向父类的构造函数

由于这里的继承是直接改了构造函数的prototype 的指向，所以在 sub的原型链中，Sub.prototype 没有constructor 属性，反而是看到了一个super 实例

这就让sub 实例的constructor 无法使用了。为了他还能用，就在那个super 实例中手动加了一个constructor 属性，且指向Sub 函数看到了一个super 实例

Ⅱ-借用构造函数继承(假的)

方式2: 借用构造函数继承(假的)

套路:

定义父类型构造函数

定义子类型构造函数

在子类型构造函数中调用父类型构造

关键:

在子类型构造函数中通用call()调用父类型构造函数

作用:

能借用父类中的构造方法,但是不灵活
function Person(name, age) {this.name = name
this.age = age
}
function Student(name, age, price) {//此处利用call(),将 [Student]的this传递给Person构造函数
Person.call(this, name, age)  // 相当于: this.Person(name, age)
/*this.name = name
this.age = age*/
this.price = price
}var s = new Student('Tom', 20, 14000)
console.log(s.name, s.age, s.price)
[Person]中的this是动态变化的,在[Student]中利用[Person.call(this, name, age)]改变了其this指向,所以可以实现此效果

Ⅲ-组合继承

方式3: 原型链+借用构造函数的组合继承

利用原型链实现对父类型对象的方法继承
利用super()借用父类型构建函数初始化相同属性

function Person(name, age) {this.name = name
this.age = age
}
Person.prototype.setName = function (name) {this.name = name
}function Student(name, age, price) {Person.call(this, name, age)  // 为了得到属性
this.price = price
}
Student.prototype = new Person() // 为了能看到父类型的方法
Student.prototype.constructor = Student //修正constructor属性
Student.prototype.setPrice = function (price) {this.price = price
}var s = new Student('Tom', 24, 15000)
s.setName('Bob')
s.setPrice(16000)
console.log(s.name, s.age, s.price)

JavaScript高级之面向对象高级相关推荐

【廖雪峰python总结】python高级特性，函数式编程，面向对象编程，面向对象高级编程
文章目录 python复习总结 python高级特性函数式编程面向对象编程面向对象高级编程 python复习总结 python高级特性 python高级特性函数式编程函数式编程函数式编程的 ...
js高级：面向对象+ES6
js高级:面向对象+ES6 文章目录 js高级:面向对象+ES6 day01 一.ES6中的类和对象 1.1对象 1.2类 1.3创建类 1.4类constructor构造函数 1.5类中添加方法 1 ...
Java第四次作业——面向对象高级特性（继承和多态）
Java第四次作业--面向对象高级特性(继承和多态) (一)学习总结 1.学习使用思维导图对Java面向对象编程的知识点(封装.继承和多态)进行总结. 2.阅读下面程序,分析是否能编译通过?如果不能, ...
Python学习笔记：面向对象高级编程（完）
前言最近在学习深度学习,已经跑出了几个模型,但Pyhton的基础不够扎实,因此,开始补习Python了,大家都推荐廖雪峰的课程,因此,开始了学习,但光学有没有用,还要和大家讨论一下,因此,写下这些帖 ...
Python学习笔记：面向对象高级编程（中下）
前言最近在学习深度学习,已经跑出了几个模型,但Pyhton的基础不够扎实,因此,开始补习Python了,大家都推荐廖雪峰的课程,因此,开始了学习,但光学有没有用,还要和大家讨论一下,因此,写下这些帖 ...
Python学习笔记：面向对象高级编程（中上）
前言最近在学习深度学习,已经跑出了几个模型,但Pyhton的基础不够扎实,因此,开始补习Python了,大家都推荐廖雪峰的课程,因此,开始了学习,但光学有没有用,还要和大家讨论一下,因此,写下这些帖 ...
Python学习笔记：面向对象高级编程（上）
前言最近在学习深度学习,已经跑出了几个模型,但Pyhton的基础不够扎实,因此,开始补习Python了,大家都推荐廖雪峰的课程,因此,开始了学习,但光学有没有用,还要和大家讨论一下,因此,写下这些帖 ...
侯捷面向对象高级编程(二)
侯捷面向对象高级编程(二) 转换函数转换函数没有返回值,返回值就是double即函数名,不需要自己写因为转换函数一般不会改变其中内容,所以要加const限定两条路都可以走,就回产生歧义,报错 e ...
c++面向对象高级编程总目录
本文是对学习侯捷视频 c++面向对象高级编程系列博客的目录总索引. c++面向对象高级编程学习一不带指针的类: 访问私有成员变量的方式,内联inline,常量成员函数,构造函数,值传递,引用传递, ...

JavaScript高级之面向对象高级

三、面向对象高级

1、对象创建模式

Ⅰ-Object构造函数模式

Ⅱ-对象字面量模式

Ⅲ-工厂模式

Ⅳ-自定义构造函数模式

Ⅴ-构造函数+原型的组合模式

2、继承模式

Ⅰ-原型链继承

① 示例图

② 构造函数补充

Ⅱ-借用构造函数继承(假的)

Ⅲ-组合继承

JavaScript高级之面向对象高级相关推荐

最新文章

热门文章