JS高级学习总结（对象）

1.对象基础

1.1 什么是对象？

• 多个数据的封装体
• 用来保存多个数据的容器
• 一个对象代表现实中的一个事物

1.2 为什么要用对象？

• 统一管理多个数据

1.3 对象的组成？

• 属性：属性名（字符串）和属性值（任意）组成，代表现实事物的状态数据
• 方法：一种特别的属性（属性值是函数），代表现实事物的行为数据

1.4 如何访问对象内部数据？

• . 属性名：编码简单，有时不能用
• [ ’ 属性名 ’ ]：编码麻烦，能通用

<script type="text/javascript">
     var p = {
         name:'Tom',
         age :12,
         setName:function(name) {
             this.name = name         
         },    
         setAge:function(age){
             this.age = age         
         }
     }
     
     p.setName('Bob')
     p['setAge'](23)
     console.log(p.name,p['age'])  // Bob 23
</script>

1.5 相关问题：

问：什么时候必须使用[ ’ 属性名 ’ ]的方式？

• 属性名包含特殊字符：- 空格
• 属性名不确定

<script type="text/javascript">
    var  p = {}
    //1.给p对象添加一个属性：content type: text/json
    //p.content-type = 'text/json' // 不能用
    p['content-type'] = 'text/json'
    console.log(p['content-type'])
    //2.变量名不确定
    var propName = 'myAge'
    var value = 18
    //p.propName = value //不能用
    p[propName] = value
    console.log(p[propName])
</script>

2.对象高级

2.1 对象创建模式

2.1.1 对象创建方式一：Object构造函数模式

• 先创建空的Object对象，再动态添加属性/方法
• 适用场景：起始时不确定对象内部数据
• 问题：语句太多

<script>
    var p = new Object()
    p.name = 'Tom'
    p.age = 12
    p.setName = function (name) {
        this.name = name    
    }
    console.log(p)
</script>

2.1.2 对象创建方式二：对象字面量模式

• 使用{ }创建对象，同时指定属性/方法
• 适用场景：起始时对象内部数据是确定的
• 问题：如果创建多个对象，有重复代码

<script>
    var p = {
        name: 'Tom'
        age: 12,
        setName: function (name) {
            this.name = name        
        }            
    }
</script>

2.1.3 对象创建方式三：工厂模式

• 通过工厂函数动态创建对象并返回
• 适用场景：需要创建多个对象
• 问题：对象没有具体类型，都是Object类型

<script>
    function creatPerson (name,age) {    //返回一个对象的函数===>工厂函数
        var obj = {
            name: name,
            age: age,
            setName: function(name){
                this.name = name            
            }                    
        }   
        return obj 
    }
    var p1 = creatPerson('Tom',12)
    var p3 = creatPerson('Jack',32)
</script>

2.1.4 对象创建方式四：自定义构造函数模式

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

<script>
    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)
    console.log(p1 instanceof Person)
    
     function Student(name, price){
        this.name = name
        this.price = price          
    }
    var s = new Student('Bob',13000)
    console.log(s instanceof Student)
</script>

2.1.5 对象创建方式五：构造函数+原型的组合模式

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

<script>
    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',12)
    console.log(p1,p2)
</script>

2.2 继承模式

2.2.1 继承模式方式一：原型链继承

• 1.套路
  • 定义父类型构造函数
  • 给父类型的原型添加方法
  • 定义子类型的构造函数
  • 创建父类型的对象赋值给子类型的原型
  • 将子类型原型的构造属性设置为子类型
  • 给子类型原型添加方法
  • 创建子类型的对象：可以调用父类型的方法
• 2.关键
  • 子类型的原型为父类型的一个实例对象
    

2.2.2 继承模式方式二：借用构造函数继承（假的）

• 1.套路
  • 定义父类型构造函数
  • 定义子类型的构造函数
  • 在子类型构造函数中调用父类型构造
• 2.关键
  • 在子类型构造函数中通过super()调用父类型构造函数

<script>
    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('Bob',20,13000)
    console.log(s.name,s.age,s.price)
</script>

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

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

<script>
     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',20,13000)
    s.setName('Bob')
</script>