JS自定义对象的理解

JavaScript是一门面向对象语言
面向对象：是一种编程思想

什么是对象？

• 对象是属性和方法的集合体；
  属性：储存数据
  方法：执行的动作

                    语法：obj = {
                        name:12,
                        age:13，
                        skill:function(){}
                    }
                    //name,age:表示对象obj的属性名，冒号后面的为属性值，像这种形式叫键值对
                    //skill:是obj对象的方法
  

自定义对象方式

1.字面量
2.工厂模式
3.构造函数模式
4.原型模式
5.混合模式（原型模式和构造函数模式的混合）

字面量

• 优点：简单，容易理解
• 缺点：不能批量生产

            var obj={
                name:'什么颜色',
                age:78,
                skill:function(){
                    console.log('睡觉');
                }
            }
            console.log(obj['name']);//什么颜色
            obj.skill();//睡觉

工厂函数模式

• 优点：实现了对象的批量生产
• 缺点：不能检测出对象是由谁来生产的

function factory(name,age,callback){
    return {
        name:name,
        age:age,
        callback:callback,//回调函数
        skill:function(){   //方法
            console.log('睡觉');
        }
    }
}
var girlFriend = factory('翠花',18);
console.log(girlFriend);//{name: "翠花", age: 18, skill: ƒ, callback: undefined}

var girlFriend2 = factory('如花',81);
console.log(girlFriend2);   //{name: "如花", age: 81, skill: ƒ, callback: undefined}

console.log(girlFriend==girlFriend2);//false

var girlFriend = factory('凤姐',20,function(){
    console.log("解锁更多姿势！");
});
//调用方法
girlFriend3.callback();

构造函数模式

所有属性和方法需要this来定义，通过new关键词来调用

new关键词做了什么事？
1.创建一个新对象
2.将this指向新对象
3.执行构造函数的代码
4.返回这个新对象

• 优点：解决不能识别由谁创建的问题
• 缺点：实现相同的方法，却会各自创建新的空间来存放这些方法，这样会造成空间浪费

            function Human(type,name,gender,age){
                this.type = type;
                this.name = name;
                this.gender = gender;
                this.age = age;
                this.skill = function(){
                    console.log('走');
                }
            }
            var shiyan = new Human('黄种人','食盐','男',20);
            console.log(shiyan);//Human {type: "黄种人", name: "食盐", gender: "男", age: 20, skill: ƒ}
            var xiawa = new Human('白种人','夏娃','女',1000);
            console.log(xiawa);//Human {type: "白种人", name: "夏娃", gender: "女", age: 1000, skill: ƒ}

            console.log(xiawa.__proto__.constructor);//指向构造函数
            console.log(xiawa.skill==shiyan.skill);//false

原型模式

• 优点：实现继承，解决了构造函数空间浪费的问题
• 缺点：不能定制

function Animal(){};
Animal.prototype.type='cat';
Animal.prototype.skill=function(){
    console.log('eat')
}
var mao = new Animal();
mao.skill();//eat
var mao2 = new Animal();
mao2.skill();//eat
console.log(mao.skill==mao2.skill);//true
console.log(mao2==mao);//false

混合模式（原型模式和构造函数模式的结合）

结合了他们两个的优点

function Student(cls,name,age,gender,num){
    this.cls=cls;  
    this.name=name;
    this.age=age;
    this.gender= gender;
    this.num = num;
}
//共有的方法，不需要每次创建，节省空间
Student.prototype.skill=function(){
      console.log('学习');
}
var student1 = new Student('01','小芳',12,'女','0101');
console.log(student1);

var student2 = new Student('01','小芳',12,'女','0101');
console.log(student1.skill==student2.skill);//true
console.log(student1==student2);//false
            
//student.gender返回的是简单数据类型
console.log(student1.gender==student2.gender);//true