Javascript（中）——自定义对象

对象：在Javascript中，是具有属性和方法的数据。

有七种方式：直接创建方式、对象初始化器方式、构造函数方法、prototype原型方式、混合的构造函数/原型方式、动态原型方式和工厂模式。其中前五种较常用。

参数列表表示可以写多个参数，用逗号隔开。

直接创建方式（注意对象变量名后面的点）

语法：
var 对象变量名 = new Object();
对象变量名. property1 = value1;
…;
对象变量名. propertyN = valueN;
对象变量名. methodName1 = function([参数列表]){
    //函数体
}
…;
对象变量名. methodNameN = function([参数列表]){
    //函数体
}

举例

var student=new Object();
    student.name="晓琳";
    student.age=18;
    student.doHomework=function(name){
        console.log(this.age+"岁的"+name+"正在做作业");
    }
    student.music=function(){
        console.log(this.age+"岁的"+this.name+"正在听音乐");
    }
    student.doHomework(student.name);//调用函数，输出18岁的晓琳正在做作业
    student.music();//输出18岁的晓琳正在听音乐
其中**this.age**指代了对象属性里的**18**，总是指代这一个属性18，在调用时，不用加括号里的属性。

对象初始化器方式（注意属性之间用逗号隔开，最后一个不加逗号，属性与属性值间用【冒号】，不是等号）

语法
var 对象变量名 = {
    property1 : value1,
    property2 : value2,
    …, 
    propertyN : valueN,
    methodName1 : function([parameter_list]){
        //函数体
    },
    …, 
    methodNameN : function([parameter_list]){
        //函数体
    }
}

举例

var student={
    name:"洲洲",
    age:23,
    guitar:function(name){
        console.log(this.age+"岁的"+name+"喜欢弹吉他");
    },
    dance:function(name){
        console.log(name+"喜欢跳舞");
    }
}
student.guitar(student.name);//输出23岁的洲洲喜欢弹吉他
student.dance(student["name"]);//输出洲洲喜欢跳舞

构造函数方式【构造函数用大写】
缺点–属性和方法混合在一起；优点–便于赋值

function 构造函数([参数列表]){ 
    this.属性 = 属性值; 
    …
    this.属性N = 属性值N;
    this.函数1 = method1; 
    …
    this.函数N = methodN; 
}
function method1([参数列表]){
    //函数体
}
…
function methodN([参数列表]){
     //函数体
}
举例
function Student(age){
    this.name = "小王";
    this.age = age;
    this.doHomework = doHomework;
}

function doHomework(name){
    console.log(name+"正在学习......");
}

var student = new Student(89);
var name = student.name;//调用属性
var age = student.age;
console.log(name+":"+age);
student.doHomework(name);//调用方法

或

function  构造函数([参数列表]){ 
    this.属性 = 属性值; 
    …
    this.属性N = 属性值N;
    this.函数1 = function([参数列表]){
        //函数体
    } ;
    …
    this.函数N = function([参数列表]){
        //函数体
    } ;
}

举例
function Actor(name,age){
    this.name=name;
    this.age=age;
    this.dance=function(){
        console.log(this.age+"岁的"+this.name+"喜欢跳舞");
    }
    this.music=function(){
        console.log(this.name+"喜欢音乐");
    }
}
var actor1=new Actor("鲸鱼",25);
var actor2=new Actor("洲洲");
actor1.dance();//输出25岁的鲸鱼喜欢跳舞
actor2.music();//输出洲洲喜欢音乐

prototype原型方式【构造器首字母要大写】
优点：方法与构造函数分离；缺点：不便于赋值。

function 对象构造器( ){
} 
对象构造器.prototype.属性名=属性值;
对象构造器.prototype.函数名 = function([参数列表]){
    //函数体

举例

function Children(){
}
    Children.prototype.name="宇宙";
    Children.prototype.age=18;
    Children.prototype.travel=function(){
        console.log(this.age+"岁的"+this.name+"总是想去旅行");
    }
    var child=new Children();
    child.travel();//输出18岁的宇宙总是想去旅行

混合的构造函数与原型方式
结合了构造函数式与原型式的优点；运用构造函数式定义属性——便于赋值；运用原型式定义方法——使得属性和方法得以分离。

function 对象构造器([参数列表]){
} 
对象构造器.prototype.函数名 = function([参数列表]){
    //函数体
}
举例
function Family(name,age){
    this.name=name;
    this.age=age;
}
Family.prototype.cook=function(){
    console.log(this.age+"岁的"+this.name+"喜欢做饭。");
}
Family.prototype.guitar=function(){
    console.log(this.age+"岁的"+this.name+"爱好吉他");
}

var member1=new Family("大海",18);//调用属性
var member2=new Family("因子",18);
member1.cook();//输出18岁的大海喜欢做饭。
member2.guitar();//输出18岁的因子爱好吉他

Javascript（中）——自定义对象

猜你喜欢