对象高级相关

最新推荐文章于 2024-05-24 23:13:24 发布

失败中成长

最新推荐文章于 2024-05-24 23:13:24 发布

阅读量90

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/hhhzhou/article/details/118907366

版权

js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文详细介绍了JavaScript中的五种对象创建模式：Object构造函数模式、对象字面量模式、工厂模式、自定义构造函数模式以及构造函数+原型的组合模式。每种模式都有其适用场景和优缺点。此外，还探讨了两种继承模式——原型链继承和借用构造函数继承，解释了它们的工作原理和应用场景。这些模式和策略对于理解和优化JavaScript代码的组织结构至关重要。

摘要由CSDN通过智能技术生成

对象创建模式

方式一：Object构造函数模式

先创建空Object对象，然后动态添加属性，方法
使用场景：起初不确定对象内部数据
问题：语句太多

方式2：对象字面量模式

1，使用{}创建对象，同时指定属性，方法
2，使用场景：起初时对象内部数据是确定的
3，问题：如果创建多个对象，有重复代码
在这里插入图片描述

方式3：工厂模式

1，通过工厂函数动态创建对象并返回
2，使用场景：需要创建多个对象
3，问题：对象没有一个具体类型，都是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)

方式4：自定义构造函数模式

1，自定义构造函数，通过new创建对象
2，使用场景：需要创建多个类型确定的对象
3，问题：每个对象都有相同的数据，浪费内存

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); 

function Student(name,price){
    this.name=name
    this.price=price
}
var s = new Student('Bob',13000)
console.log(s instanceof Student)

方式5：构造函数+原型的组合模式

1，自定义构造函数，属性在函数中初始化，方法添加到原型上
2，使用场景：需要创建多个类型确定的对象

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)

在这里插入图片描述

继承模式

原型链继承

1，定义父类的构造函数，给父类的原型添加方法
2，定义子类的构造函数
3，创建父类的对象赋值给子类的原型
4，将子类的原型的构造属性设置为子类型
5，给子类型原型添加方法
6，给子类型原型添加方法
7，创建子类型的对象：可以调用父类型的方法
8，关键：子类型的原型为父类型的实例

//父类型
function Father(){
    this.supProp = 'father property'
}
Father.propertype.show = function(){
    console.log(this.supProp)
}

//子类型
function Son(){
    this.subProp = 'son property'
}
Son.prototype = new Father（） // 这是关键，子类型的原型为父类型的实例
Son.prototype.constructor = Son // 让子类的原型的constructor指向子类型
Son.propertype.show2 = function(){
    console.log(this.subProp)
}

var son = new Son()
son.show()  // father property

在这里插入图片描述

借用构造函数继承

function Person(name,age){
    this.name = name;
    this.age = age;
}
function Student (name,age,price){
    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);

组合继承

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.Person(name.age)
    
    // this.name = name;
    // this.age = 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