Javascript类和对象基础知识

Javascript中的类其实就是一个function

如下面定义一个Person类

[javascript] view
plain copy

//定义一个类  

function Person(){  

    this.name = 'jaune';  

    this.age = 18;  

}  

  

//创建一个对象  

  

var person1 = new Person();  

console.log(person1);  

  

/* 

 * 控制台打出以下内容 

 * Person {name: "jaune", age: 18} 

 */   

上面是一个简单的定义类及创建类的方法

[javascript] view
plain copy

//定义一个带有方法的类  

function Person(){  

    this.name = 'jaune';  

    this.age = 18;  

      

    this.getName=function(){  

        return this.name;  

    }  

      

    this.setName = function(name){  

        this.name = name;  

    }  

}  

  

//创建一个对象  

  

var person1 = new Person();  

person1.setName('me')  

console.log(person1);  

  

/* 

 * 控制台打出以下内容 

 * Person {name: "me", age: 18, getName: function, setName: function} 

 */   

[javascript] view
plain copy

//定义一个带有参数的类  

function Person(name,age){  

    this.name = name || 'jaune';  

    this.age = age || 18;  

      

    this.getName=function(){  

        return this.name;  

    }  

      

    this.setName = function(name){  

        this.name = name;  

    }  

}  

  

//创建一个对象  

  

var person1 = new Person();  

console.log(person1);  

var person2 = new Person('jaune162',23);  

console.log(person2);  

/* 

 * 控制台打出以下内容 

 * Person {name: "jaune", age: 18, getName: function, setName: function} 

 * Person {name: "jaune162", age: 23, getName: function, setName: function} 

 */   

Javascript对象的操作

对象原型prototype的应用，利用prototype可以为类添加一些属性或方法，注意必须是类，对象是没有原型的

[javascript] view
plain copy

console.log(Person.prototype);  

  

Person.prototype.getInfo = function(){  

    return this.name + ' is ' + this.age + ' years old';  

};  

//创建一个对象  

  

var person2 = new Person('jaune162',23);  

console.log(person2.getInfo());  

  

console.log(person2.prototype);  

/* 

 * 控制台打出以下内容,第一行是类的原型属性，第二行是利用原型添加的方法，第三行是对象原型，由此可见对象是没有原型的 

 * Person {}  

 * jaune162 is 23 years old  

 * undefined  

 */   

[javascript] view
plain copy

/** 

 * apply方法：为对象批量添加属性和方法 

 * @param {Object} obj 对象或类 

 * @param {Object} config 属性和方法的集合 

 */  

function apply(obj,config){  

      

    if (config == null) return obj;  

      

    for(var name in config){  

        if(config.hasOwnProperty(name)){  

            obj[name] = config[name];  

        }  

    }  

      

    return obj;  

}  

  

//有了这个方法我们的Person类就可以改造的更加灵活了  

function Person(config){  

      

    apply(this,config);  

      

}  

  

var person = new Person({  

    name:'wang',  

    age:16,  

    email:'xxx@126.com'  

});  

  

console.log(person);  

//Person {name: "wang", age: 16, email: "xxx@126.com"}   

下面我们对apply进行一些改造，改为applyIf，让这个方法只覆盖对象中有的属性

[javascript] view
plain copy

/** 

 * applyIf方法：可以称之为，为对象批量赋值 

 * @param {Object} obj 对象或类 

 * @param {Object} config 属性和方法的集合 

 */  

function applyIf(obj,config){  

      

    if (config == null) return obj;  

      

    for(var name in config){  

        if(config.hasOwnProperty(name) && obj.hasOwnProperty(name)){  

            obj[name] = config[name];  

        }  

    }  

      

    return obj;  

}  

  

//测试applyIf用在上面的类中的效果  

function Person(config){  

      

    applyIf(this,config);  

      

}  

var person = new Person({  

    name:'wang',  

    age:16,  

    email:'xxx@126.com'  

});  

  

console.log(person);  

//Person {}   

可以看出根本没有打出任何属性，因为类中不存在这些属性，我们对Person类，稍做改造来看我们的成果

[javascript] view
plain copy

function Person(config){  

    this.name = '';  

    this.age = '';  

      

    applyIf(this,config);  

      

}  

var person = new Person({  

    name:'wang',  

    age:16,  

    email:'xxx@126.com'  

});  

  

console.log(person);  

//Person {name: "wang", age: 16}   

可以看出通过这个方法可以实现对类的属性的控制，不会在new对象时出现类中本来就不存在的属性。