首页 > 代码库 > ExtJS教程（2）--- Javascript类和对象基础知识

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

2024-07-10 16:36:17   220人阅读

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

未完待续...


联系
我们