JS-Object Advance-CSDN博客

本文链接：https://blog.csdn.net/ImmortalSYM/article/details/121064392

本文详细介绍了JavaScript中五种对象创建模式：Object构造函数模式、对象字面量模式、工厂模式、自定义构造函数模式以及构造函数+原型的组合模式，分析了各自的适用场景和优缺点。此外，还探讨了三种继承模式：原型链继承、借用构造函数继承以及原型链+借用构造函数的组合继承，展示了如何实现对象间的继承关系。

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

JS-Object Advance

对象创建模式

方式一：Object构造函数模式

—先创建空Object对象，在动态添加属性和方法；

—适用于起初不确定对象内部数据的情况；

—存在语句较多的问题
<script>
	var p = new Object()
   p.name="Tom"
	p.age=12
	p.setName=function(name){
  		this.name = name
}
</script>
方式二：对象字面量模式

—使用{}创建对象，同时指定属性和方法；

—适用于起初时对象内部数据是确定的；

—存在如果创建多个对象，就会有重复代码；
<script>
	 var  p = {
   	name:"Tom"
   	age:12
   	setName:function(name){
       	this.name = nawme
   	}
	}
</script>
方式三：工厂模式

—通过工厂函数动态创建对象并返回；

—适用于需要创建多个对象的情况；

—存在对象没有一个具体的类型，都是Object类型；
<script>
//返回一个对象的函数，为工厂函数
	function createPerson(name,age){
  		var obj = {
      		name:name,
      		age:age,
     		setName:function(name){
          		this.name
      }
  }
  return obj
}
//创建两个对象，都是Object类型
var p1 = createPerson("Tom",12)
var p2 = createPerson("Jack",14)
</script>
方式四：自定义构造函数模式

—自定义构造函数，通过new关键字创建对象；

—适用于需要创建多个类型的确定的对象；

—每个对象都有相同的数据，比如有相同的方法，浪费内存；
<script>
	//定义类型
function Person(name,age){
  this.name = name
  this.age = age
  this.setName = function(){
      this.name = name
  }
}
//创建对象
var p1 = new Person('Tom',12)
</script>
方式五：构造函数+原型的组合模式

—自定义构造函数，属性在函数中初始化，方法添加到原型上；

—适用于需要创建多个类型确定的对象；
<script>
	function Person(name,age){
  		this.name = name
  		this.age = age
}
//将共同方法添加到原型对象上
Person.prototype.setName = function(name){
  this.name = name
}
var p1 = new Person('Tom',12)
var p1 = new Person('Tom',12)
</script>

继承模式

方式一：原型链继承

定义父类型的构造函数
给父类型的原型添加方法
定义子类型的构造函数
创建父类型的对象赋值给子类型的原型（子类型的原型为父类型的一个实例对象）
将子类型原型的构造属性constructor设置为子类型
给子类型原型添加方法
创建子类型的对象：可以调用父类型的方法

<script>
	//父类型
    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)
    }
</script>

方式二：借用构造函数继承(假继承)

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

<script>
	function Person(name,age){
        this.name = name
        this.age = age
    }
    function Student(name,age,price){
        //相当于this.Person(name,age)
        Person.call(this,name,age)
        this.price = price
    }
    var s = new Student('Tom',20,14000)
</script>

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

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

<script>
	function Person(name,age){
        this.name = name
        this.age = age
    }
    //为Person构造函数添加方法
    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构造函数对象添加方法
    Student.prototype.setPrice = function(price){
        this.price = price
    }
</script>