ExtJS教程（2）--- Javascript类和对象基础知识

标签：extjs   javascript   

Javascript中的类其实就是一个function

如下面定义一个Person类

//定义一个类
function Person(){
	this.name = 'jaune';
	this.age = 18;
}

//创建一个对象

var person1 = new Person();
console.log(person1);

/*
 * 控制台打出以下内容
 * Person {name: "jaune", age: 18}
 */ 

//定义一个带有方法的类
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}
 */ 

//定义一个带有参数的类
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}
 */ 

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

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 
 */ 

/**
 * 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"} 

/**
 * 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 {} 

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} 

未完待续...

ExtJS教程（2）--- Javascript类和对象基础知识,布布扣,bubuko.com

ExtJS教程（2）--- Javascript类和对象基础知识

标签：extjs   javascript   

原文地址：http://blog.csdn.net/jaune161/article/details/36487247