本系列将从以下专题去总结:
1. JS基础知识深入总结
2. 对象高级
3. 函数高级
4. 事件对象与事件机制
暂时会对以上四个专题去总结,现在开始Part2:对象高级。下图是我这篇的大纲。
2.1 对象的创建模式
-
方式一:Object构造函数模式
- 套路: 先创建空Object对象, 再动态添加属性/方法
- 适用场景: 起始时不确定对象内部数据
- 问题: 语句太多
// 先创建空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) //Tom 12 p.setName('Bob') console.log(p.name, p.age) //Bob 12
-
方式二:对象字面量模式
- 套路: 使用
{}
创建对象, 同时指定属性/方法 - 适用场景: 起始时对象内部数据是确定的
- 问题: 如果创建多个对象, 有重复代码
var p = { name: 'Tom', age: 12, setName: function (name) { this.name = name } } //测试 console.log(p.name, p.age) //Tom 12 p.setName('JACK') console.log(p.name, p.age) //JACK 12 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创建对象
- 适用场景: 需要创建多个类型确定的对象
- 问题: 每个对象都有相同的数据, 浪费内存。主要是指方法数据的重复,导致浪费。
//定义类型,Person类型 function Person(name, age) { this.name = name this.age = age this.setName = function (name) { this.name = name } } var p1 = new Person('Tom', 12) p1.setName('Jack') console.log(p1.name, p1.age) //Jack 12 console.log(p1 instanceof Person) //true function Student (name, price) { this.name = name this.price = price } var s = new Student('Bob', 13000) console.log(s instanceof Student) //true var p2 = new Person('JACK', 23) console.log(p1, p2) //都返回Person类型对象
-
方式五: 构造函数+原型的组合模式
- 套路: 自定义构造函数, 属性在函数中初始化, 方法添加到原型上
- 适用场景: 需要创建多个类型确定的对象
function Person(name, age) { //在构造函数中只初始化属性 this.name = name this.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) //都返回一个Person类型对象
2.2 对象的继承模式
2.2.1 方式一:原型链继承
- 套路
- 定义父类型构造函数
- 给父类型的原型添加方法
- 定义子类型的构造函数
- 创建父类型的对象赋值给子类型的原型
- 将子类型原型的构造属性设置为子类型
- 给子类型原型添加方法
- 创建子类型的对象: 可以调用父类型的方法
- 关键
- 子类型的原型为父类型的一个实例对象
大致的程序步骤思想:
function Parent(){}//父 构造函数
Parent.prototype.test = function(){};//在父的原型对象上添加test方法
function Child(){}// 子 构造函数
Child.prototype = new Parent(); // 子类型的原型指向父类型实例
Child.prototype.constructor = Child;//最好也把constructor也重新置给Child构造函数
var child = new Child(); //有test()
给个案例分析:
//父类型
function Supper() {
this.supProp = 'Supper property'
}
Supper.prototype.showSupperProp = function () {
console.log(this.supProp)
}
//子类型
function Sub() {
this.subProp = 'Sub property'
}
// 子类型的原型为父类型的一个实例对象
Sub.prototype = new Supper()
// 让子类型的原型的constructor指向子类型(构造函数)
Sub.prototype.constructor = Sub
Sub.prototype.showSubProp = function () {
console.log(this.subProp)
}
var sub = new Sub()
sub.showSupperProp() //Supper property
sub.showSubProp() //Sub property
console.log(sub) // 返回Sub类型对象
案例图解:
2.2.2 方式2: 借用构造函数继承(假的)
- 套路:
- 定义父类型构造函数
- 定义子类型构造函数
- 在子类型构造函数中调用父类型构造
- 关键:
- 在子类型构造函数中通用call()调用父类型构造函数
给个案例分析:
function Person(name, age) {
this.name = name
this.age = age
}
function Student(name, age, price) {
//为了获得父类型的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) //Tom 20 14000
2.2.3 方式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) //Bob 24 16000
2.2.4 方式四:ES6的class的继承
在ES6中引入了class
关键字,但更多的是一种语法糖,本质上还是寄生组合继承的继承方式。是一种相对完美的继承方式。
寄生组合继承的核心总结以下几点:(边看图边看文字理解)
1.子类构造函数的 __proto__
指向父类构造器,继承父类的静态方法
2.子类构造函数的 prototype
的 __proto__
指向父类构造器的 prototype
,继承父类的方法。
[ 1和2这两点也就是下图橙色标记的两条线。]
3.子类构造函数继承了父类构造函数里的属性。使用 super
调用的( ES5则用 call
或者 apply
调用传参)。
class Animal {
constructor(name) {
this.speed = 0;
this.name = name;
}
run(speed) {
this.speed += speed;
alert(`${this.name} runs with speed ${this.speed}.`);
}
stop() {
this.speed = 0;
alert(`${this.name} stopped.`);
}
}
// Inherit from Animal
class Rabbit extends Animal {
hide() {
alert(`${this.name} hides!`);
}
}
let rabbit = new Rabbit("White Rabbit");
rabbit.run(5); // White Rabbit runs with speed 5.
rabbit.hide(); // White Rabbit hides!
如你所见,如你所想,extend
关键字实际上是在 Rabbit.prototype
添加[[proto]]
,引用到 Animal.prototype
。
rabbit
既可以访问它自己的方法,也可以访问 Animal
的方法。
2.3 new对象
看我们尝尝写的一个例子:
function Person() {
this.name = name
this.age = age
}
var person = new Person()
事实上,new一个对象做了什么呢?完整执行的代码:
function Person() {
var this = {
__proto__: Person.prototype
}
this.name = name
this.age = age
return this
}
var person = new Person()
故new一个对象做了以下几步:
- 创建一个空对象
- 给对象设置
__proto__
, 值为构造函数对象的prototype
属性值this.__proto__ = Fn.prototype
- 执行构造函数体(给对象添加属性/方法)
- 隐式
return this
,返回新对象
注:如果构造函数没有显式返回一个对象类型Object
(包含Function
Array
Date
RegExg
Error
),则默认隐式return this
(this
指代刚new出来的对象实例)。一般情况下,构造函数不返回值,但是用户可以选择主动返回一个对象,这个对象就会覆盖默认返回的this
实例)。
当然构造函数还是可以返回值类型的(Number
String
Boolean
等),这个时候还是返回默认的this
!只有返回对象类型,才会覆盖原先的this
!
此文档为吕涯原创,可任意转载,但请保留原链接,标明出处。
文章只在CSDN和掘金第一时间发布:
CSDN主页:https://blog.csdn.net/LY_code
掘金主页:https://juejin.cn/user/3667626521532855
若有错误,及时提出,一起学习,共同进步。谢谢。 😝😝😝