自定义对象(6种)

前言

  JavaScript:是一门;而面向对象是一种;是根据需求来一步一步完成任务的一种思想。

什么是对象?
  --- 指的是 属性方法 的集合体。

  • 属性:储存数据;
  • 方法:执行的动作。

什么是键值对?

 语法: obj = {
            name:12,
            age:13,
            skill:function(){}
        }

* name,age: 表示对象obj的属性名,冒号后面的为属性值,像这种形式我们叫 ***键值对*** 。
* skill: 是obj对象的方法。

自定义对象(5种):

1、字面量:

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

语法:

//1.字面量定义对象:
var obj = {
    name:"超人",
    age:27,
    skill:function(){
        console.log("激光波");
    }
}
console.log(obj.name);//超人 --- 调用 (属性)的语法
console.log(obj["name"]);//超人 --- 另一种调用 (属性)的语法,注意语法要加上双引号!
obj.skill();//激光波 --- 调用 (方法)的语法

2、工厂模式:

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

语法:

//2.工厂模式:
function factory(name,age,callback){
    return {
        name:name,
        age:age,
        skill:function(){
          console.log("睡觉zZ")
        },
        callback:callback
    }
}

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 girlfriend3 = factory("凤姐",20,function(){
    console.log("蛋炒饭!");
})
console.log(girlfriend3);//{name: "凤姐", age: 20, skill: ƒ, callback: ƒ}
girlfriend3.callback(); //调用里面的函数

//缺点:
console.log(girlfriend3 instanceof Object);//true   //--- 可是不能检测出对象是由谁来产生的
console.log(girlfriend3.prototype);//undefined   //---prototype只能用于函数,而这是对象

3、构造函数模式:
   --- 所有属性和方法需要通过this来定义,通过new关键词进行调用。

  • 优点:解决不能识别 其是由谁创建出来的问题。

  • 缺点:实现相同的方法,但是却会各自创建新的空间来存放这些方法。这样会造成空间浪费!

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

语法:

//3.构造函数:
function Human(type,name,gender,age){
    this.type = type;
    this.name = name;
    this.gender = gender;
    this.age = age;
    this.skill = function(){
        console.log("走");
    }
}

var pangu = new Human("黄种人","盘古","男","20");
console.log(pangu);//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.prototype);//undefined   //---prototype 对 对象不可用
console.log(xiawa.constructor);//Human(type,name,gender,age){..
console.log(xiawa.__proto__);//{constructor: ƒ}

//缺点:
console.log(pangu.skill == xiawa.skill);//false  
//--- 说明两个对象不是指向同一个空间,而是各创建一次对象,也就创建了一次相同的方法,这样会造成了资源空间浪费!

4、原型模式:

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

语法:

//4、原型模式:--- 用于解决继承问题
function Animal(){};
Animal.prototype.type = "猫";
Animal.prototype.skill = function(){
    console.log("吃吃吃--")
}//固定写一个属性,不可定制!

var mao = new Animal();
mao.skill();//吃吃吃--
var mao2 = new Animal();
console.log(mao.skill == mao2.skill);//true  //---说明两个对象指向同一个空间,是继承过来的。
console.log(mao)//Animal {}   //--- 说明mao自身没有skill方法
console.log(mao.__proto__)//{type: "猫", skill: ƒ, constructor: ƒ}  //---
            
console.log(mao == mao2);//false  //--- 说明每次new出来的都是独立的新对象
console.log(mao.type == mao2.type);//true  //---说明对象属性指向相同

5、混合模式:
   --- 构造函数模式和原型模式的结合。

  • 优点:
  • 缺点:

语法:

//5、混合模式:
function Student(cls,name,age,gender,number){
    this.cls = cls;
    this.name = name;
    this.age = age;
    this.gender = gender;
    this.number = number;
}
Student.prototype.skill = function(){
    console.log("学习");
}

var student1 = new Student("01","小芳",12,"女","0101");
console.log(student1);//Student {cls: "01", name: "小芳", age: 12, gender: "女", number: "0101"}  //--- 这里没有skill
var student2 = new Student("01","小蓝",12,"女","0101");
console.log(student2);//Student {cls: "01", name: "小芳", age: 12, gender: "女", number: "0101"}  //--- 这里没有skill
            
console.log(student1 == student2)//false   //---说明都是独立的个体
console.log(student1.skill == student2.skill)//true  //---说明都是继承父级的方法
            
/*注意*/
console.log(student1.age == student2.age)//true  //---这里返回的是简单数据类型,直接比较值

6、class类定义对象:
6.1、语法:
  class name{
    constructor( ){
      相当于混合模式的构造函数
    }
    放在constructor外面的方法或者是属性(这个位置的代码相当于混合模式中的原型对象上的方法)
  }
6.2、如何实现类与类之间的继承?
  --- 可以通过extends关键字来实现:
语法(比如类B需要继承类A):
  class A{ };
  class B extends A{
    constructor( ){
      super( )//调用类A
    }
  };

语法:

//6、class类实现选项卡:
class Tab{
constructor(){}//没有的话可以省略 ***
    init(){
        var leng = this.btns.length;
        var that = this;
        for(var i=0;i

你可能感兴趣的:(自定义对象(6种))