首页 > 编程语言 > 详细

ExtJS教程(2)--- Javascript类和对象基础知识

时间:2014-07-03 16:59:20      阅读:420      评论:0      收藏:0      [点我收藏+]

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

Javascript对象的操作

对象原型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"} 

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

/**
 * 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类,稍做改造来看我们的成果

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对象时出现类中本来就不存在的属性。

未完待续...





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

ExtJS教程(2)--- Javascript类和对象基础知识

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!