Js高级-对象的理解

一：对象基础
1.什么是对象?

代表现实中的某个事物, 是该事物在编程中的抽象
多个数据的集合体(封装体)
用于保存多个数据的容器

2.为什么要用对象?

便于对多个数据进行统一管理

3.对象的组成
①属性

代表现实事物的状态数据 由属性名和属性值组成 属性名都是字符串类型, 属性值是任意类型

②方法

代表现实事物的行为数据
是特别的属性==>属性值是函数

4.如何访问对象内部数据?

属性名: 编码简单, 但有时不能用
[‘属性名’]: 编码麻烦, 但通用

5.难点：

对象最终保存的属性名一定是字符串，如果设置的时候不是字符串，会调用toString()方法将其转换成字符串

// 创建对象
  var p = {
    name: 'Tom',
    age: 12,//普通属性
    setName: function (name) {
      this.name = name//方法，特别的属性，属性值是function
    },
    setAge: function (age) {
      this.age = age
    }
  }
 
  // 访问对象内部数据
   console.log(p.name, p['age'])
   p.setName('Jack')
   p['age'](23)
   console.log(p['name'], p.age)

问题: 什么时候必须使用[‘属性名’]的方式?

属性名不是合法的标识名
属性名不确定

  var obj = {};
  obj.name = 'kobe';
  obj['content-type'] = 'application';//obj.content-type = 'application',这样写直接报错，因为content-type是不合法写法，编译工具不认识
  console.log(obj['content-type']);

6.对象中所有的key都是字符串
理解什么是key？
第一：key其实就是对象中键名，是可以自定义的，比如：name，age，也可以是数字：1,2,3
第二：如果key是数字，不能使用obj.1这样取值，而是要用obj[ 1 ]这样取值
第三：key也可以是变量名，通过 [ 变量 ] 包起来，取值的时候是obj.[ 变量 ]

 // 对象中所有的key都是字符串
  var a = {}
  var obj1 = {n:345345345} // toString() = '[object Object]'
  var obj2 = {hh: 4535345} // toString() = '[object Object]'
  a[obj1] = 4
  console.log(a); // {}
  a[obj2] = 5
  console.log(a);
  console.log(a[obj2]) // 输出5

二：对象高级
01.Object构造函数模式

套路: 先创建空Object对象, 再动态添加属性/方法
适用场景: 起始时不确定对象内部数据
缺点: 语句太多

  var obj = new Object();
  obj.name = 'kobe';
  obj.age = 43;

02.对象字面量

套路: 使用{}创建对象, 同时指定属性/方法
适用场景: 起始时对象内部数据是确定的
缺点: 如果创建多个对象, 有重复代码

  var obj = {
      name: 'kobe',
      age：43
};
  var obj2 = {
       name: 'wade', 
       age: 42
};
  var obj3 = {
       name: 'tom', 
       age: 18 
};

03.工厂模式

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

 function Person(name, age) {
    return {
      name: name,
      age: age
    };
  };
  var person1 = Person('kobe', 43);
  var person2 = Person('wade', 38);
   
  console.log(person1 instanceof Person);//false,persion1不是Persion实例对象

04.自定义构造函数模式

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

 function Person(name, age) {
    this.name = name;
    this.age = age;
    this.showName = function () {
         console.log(this.name);
     };
  };

  var person1 = new Person('kobe', 43);
  var person2 = new Person('wade', 38);
  console.log(person1 instanceof Person); // true,persion1是Persion的实例对象
  person1.showName();
  person2.showName();

05.构造函数+原型的组合模式

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

 function Person(name, age) {
    this.name = name;
    this.age = age;
  };
  Person.prototype.showName = function () {
    console.log(this.name);
  };
  var person1 = new Person('kobe', 43);
  var person2 = new Person('wade', 38);
  console.log(person1 instanceof Person); // true,persion1是Persion的实例对象
  person1.showName();
  person2.showName();

三.原型继承
01.原型继承的理解
子类的原型成为父类的实例

   function Persion(name, age) {
      this.name = name;
      this.age = age;
  };
   
    Persion.prototype.showName = function(){
   	console.log(this.name);
   	
   };
   
   var persion1 = new Persion("kobe",18);
   persion1.showName();//kobe
   
    //子类的原型成为父类的实例
   Child.prototype = new Persion();
   //构造器属性丢了，人为添加回来
   Child.prototype.constructor = Child;
    //定义一个child类
   function Child (name , age){
   	  this.name = name;
   	  this.age = age;
   	
   };
    var child1 = new Child("xiaoming",18);
    child1.showName();//xiaoming	

person1的原型链： person1 —> Person.prototype(showName) —> Object.prototype，可以找到showName

child1的原型链： child1 —> Child.prototype —> Object.prototype，找不到showName，并报错

如果让Child的原型成为Persion的实例，让其扮演这个角色，即添加这句Child.prototype = new Persion();这样一来child1的原型链变为：child1 —> Child.prototype —> Person.prototype(showName) —> Object.prototype，可以找到showName，但是又会出现另外一个问题，constructor这个构造器属性丢了，所以还得添加回来

02.借用构造函数继承

   function Persion(name, age) {
      this.name = name;
      this.age = age;
  };
  
   var persion1 = new Persion("kobe",18);
   persion1.showName();//kobe
    
    //定义一个child类
   function Child (name , age , sex){
   	  //this.name = name;
   	  //this.age = age;
   	  //借用Persion中代码，提升性能
   	  //Persion(name,age),this --> window 
   	  //思考：this应该是Child的实例对象，而不是window，应该怎么修改？
   	  //Child的实例对象 = this
   	  Persion.call(this,name,age);
   	  this.sex = sex;
   	  
   };
    var child1 = new Child("xiaoming",18,"男");
    child1.showName();//xiaoming	

03.组合继承（借用构造函数继承+原型继承）

   function Persion(name, age) {
      this.name = name;
      this.age = age;
  };
   
   Persion.prototype.showName = function(){
      console.log(this.name);
   	
   };
   
   var persion1 = new Persion("kobe",18);
   persion1.showName();//kobe
   
   //子类的原型成为父类的实例
   Child.prototype = new Persion();
   //构造器属性丢了，人为添加回来
   Child.prototype.constructor = Child;
    //定义一个child类
   function Child (name , age , sex){
   
   	  Persion.call(this,name,age);
   	  this.sex = sex;
   	  
   };
    var child1 = new Child("xiaoming",18,"男");
    child1.showName();//xiaoming