js面向对象编程代码

最新推荐文章于 2023-05-16 22:53:02 发布
motian06
最新推荐文章于 2023-05-16 22:53:02 发布
阅读量1.6k
点赞数
分类专栏： js
js 专栏收录该内容
17 篇文章 0 订阅
订阅专栏
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
/*
 * 初探
 */
//变量的定义
var name = 'xxx';
var email = 'xxx@163.com';
var website = 'http://baidu.com';
//对象的定义
var X = {
		name:'xxx',
		email:'xxx@163.com',
		website:'http://baidu.com'
}
//成员方式显示
//alert(X.website);
//hash map方式显示
//alert(X['website']);

//函数
var doSomething = function() {
	alert('Hello World');
}
//doSomething();
var sayHello = function() {
	var hello = "Hello,I am "+this.name
				+", my email is: "+this.email
				+", my website is: "+this.website;
	alert(hello);
}
//直接赋值
X.Hello = sayHello;
//X.Hello();

//规范写法
//用function来做class
var Person = function(name, email, website) {
	this.name = name;
	this.email = email;
	this.website = website;
	
	this.sayHello = function() {
		var hello = "Hello, I am "+this.name +
					"my email is: "+this.email+
					"my website is: "+this.website;
		alert(hello);
	}
}
var X = new Person('xxx', 'xxx@163.com', 'http://baidu.com');
//X.sayHello();
//删除对象属性
delete X.name;//或者delete X['name'];
//X.sayHello();
//alert(X.name);

//属性配置 - Object.defineProperty
var X = Object.create(null);
//设置一个属性 （属性名 ,属性配置信息）Object.defineProperty
Object.defineProperty(X, "name", {
								value:"xxx", 
								writable:true, 
								configurable:true, 
								enumerable:true});
//设置多个属性（{属性名:属性配置信息, 属性名:属性配置信息}）Object.defineProperties
Object.defineProperties(X,
	{
		"email":{
			value:"xxx@163.com",
			writable:true,
			configurable:true,
			enumerable:true
		},
		"website":{
			value:"http://baidu.com",
			writable:true,
			configurable:true,
			enumerable:true
		}
	}
);
//alert(X.email);
/*
 * writable：这个属性的值是否可以改。 
 * configurable：这个属性的配置是否可以改。 
 * enumerable：这个属性是否能在for…in循环中遍历出来或在Object.keys中列举出来。 
 * value：属性值。 
 * get()/set(_value)：get和set访问器。 
 */

//Get/Set访问器
var age = 0;
Object.defineProperty(X, "age", {
							get:function() {return age+1;},
							set:function(value) {age=value;}
});
X.age = 100;//调用set
//alert(X.age)//调用get
Object.defineProperty(X, "birth_year", {
								get:function() {
									var d = new Date();
									var y = d.getFullYear();
									return (y - this.age);
								},
								set:function(year) {
									var d = new Date();
									var y = d.getFullYear();
									this.age = y -year;
								}
})
//alert(X.birth_year);
X.birth_year = 2000;
//alert(X.age);

var X = {
	name:"xxx",
	email:"xxx@163.com",
	website:"http://baidu.com",
	age:100,
	get birth_year() {
		var d = new Date();
		var y = d.getFullYear();
		return (y - this.age);
	},
	set birth_year(year) {
		var d = new Date();
		var y = d.getFullYear();
		this.age = y - year;
	}
}
//alert(X.birth_year);
X.birth_year = 2000;
//alert(X.age);

//查看对象属性配置
function listProperties(obj) {
	var newLine = '<br />';
	var names = Object.getOwnPropertyNames(obj);
	for(var i=0;i<names.length;i++) {
		var prop = names[i];
		document.write(prop+newLine);
		var descriptor = Object.getOwnPropertyDescriptor(obj,prop);
		for(var attr in descriptor){
			document.write("..."+attr+":"+descriptor[attr]);
			document.write(newLine);
		}
	}
}
//listProperties(X);

//call, apply, bind和this
//this
function print(text) {
	document.write(this.value+' - '+text+'<br/>');
}
var a = {value:10, print:print};
var b = {value:20, print:print};
//print('hello');
//alert(a.print); ->print
//a.print('a');//this a
//b.print('b');//this b
//a['print']等价于a.print
//a['print']('a');//this a
//call apply
//print.call(a, 'a');
//print.call(b, 'b');

//print.apply(a, ['a']);
//print.apply(b, ['b']);
//bind
var p = print.bind(a);
//p('a');
//p.call(b, 'b');
//p.apply(b, ['b']);

//继承和重载
var Person = Object.create(null);
Object.defineProperties(Person,
	{
		"name":{value:"xxx"},
		"email":{value:"xxx@163.com"},
		"website":{value:"http://baidu.com"}
	}
);
Person.sayHello = function() {
	var hello = "<p>Hello, I am "+this.name+",<br>"
				+"my email is: "+this.email+",<br>"
				+"my website is: "+this.website;
	document.write(hello+"<br>");
}
//Person.sayHello();
var Student = Object.create(Person);
Student.no = "1234567";
Student.dept ="computer science";
//使用Person的属性
//document.write(Student.name+' '+Student.email+' '+Student.website+'<br>');
//使用Person的方法
//Student.sayHello();
//重载sayHello方法
Student.sayHello = function() {
	var hello = "<p>Hello, I am "+this.name+",<br>"+
				"my email is: "+this.email+",<br>"+
				"my websiteis: "+this.website+",<br>"+
				"my student no is: "+this.no+",<br>"+
				"my departent is: "+this.dept;
	document.write(hello+"<br>");
}
//Student.sayHello();
//Prototype
//Object.getPrototypeOf()
//Student.name = 'aaa';
//document.write('<p>'+Student.name+'</p>');
//document.write('<p>'+Object.getPrototypeOf(Student).name+'</p>');
Student.sayHello = function () {
	Object.getPrototypeOf(Student).sayHello.call(this);
	var hello = "my student no is:" +this.no+",<br>"+
				"my departent is:"+this.dept;
	document.write(hello+"<br>");
}
//Student.sayHello();

//组合
function Composition(target, source) {
	var desc = Object.getOwnPropertyDescriptor;
	var prop = Object.getOwnPropertyNames;
	var def_prop = Object.defineProperty;
	
	prop(source).forEach(
		function(key) {
			def_prop(target, key, desc(source, key));
		}
	);
	return target;
}
//艺术家
var Artist = Object.create(null);
Artist.sing = function() {
	return this.name + ' starts singing...';
}
Artist.paint = function() {
	return this.name + ' starts painting...';
}
//运动员
var Sporter = Object.create(null);
Sporter.run = function() {
	return this.name + ' starts running...';
}
Sporter.swim = function() {
	return this.name + ' starts swimming...';
}
Composition(Person, Artist);
//document.write(Person.sing() + '<br>');
//document.write(Person.paint() + '<br>');

//看看Person中有什么
//document.write('<p>'+Object.keys(Person)+'<br>');
//document.write(Person.name+'<br>');

//Prototype和继承
var plus = function(x,y) {
	document.write(x+'+'+y+'='+(x+y)+'<br>');
	return x+y;
}
var minus = function(x,y) {
	document.write(x+'-'+y+'='+(x-y)+'<br>');
	return x-y;
}
var operations = {
		'+':plus,
		'-':minus
}
var calculate = function(x, y, operation) {
	return operations[operation](x, y);
}

//calculate(12, 4, '+');
//calculate(24, 3, '-');
//prototype就是对一对象进行扩展
var Cal = function(x, y) {
	this.x = x;
	this.y = y;
}
Cal.prototype.operations = {
		'+':function(x,y) {return x+y},
		'-':function(x,y) {return x-y}
}
Cal.prototype.calculate = function(operation) {
	return this.operations[operation](this.x,this.y);
}
var c = new Cal(4,5);
//alert(c.calculate('+'));
//alert(c.calculate('-'));
//继承
var Person = function(name, email, website) {
	this.name = name;
	this.email = email;
	this.website = website;
}
Person.prototype.sayHello = function() {
	var hello = "Hello, I am "+this.name+",<br>"+
				"my email is: "+this.email+",<br>"+
				"my website is: "+this.website;
	return hello;
}
var Student = function(name,email,website,no,dept) {
	var proto = Object.getPrototypeOf;
	//Student.prototype = Object.create(Person.prototype);
	//call()赋值、获取
	proto(Student.prototype).constructor.call(this,name,email,website);
	this.no = no;
	this.dept = dept;
}
//继承prototype
Student.prototype = Object.create(Person.prototype);
//重置构造函数
//Student.prototype.constructor = Student;
//重载sayHello()
Student.prototype.sayHello = function() {
	var proto = Object.getPrototypeOf;
	var hello = proto(Student.prototype).sayHello.call(this)+'<br>';
	hello += "my student no is: "+this.no+",<br>"+
			"my departent is: "+this.dept;
	return hello;
}
var me = new Student(
	"motian06",
	"motian06@126.com",
	"http://baidu.com",
	"88888888",
	"jinrong"
);
document.write(me.sayHello());

</script>
</body>
</html>
motian06
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js面向对象编程代码

Insert title here/* * 初探 *///变量的定义var name = 'xxx';var email = 'xxx@163.com';var website = 'http://baidu.com';//对象的定义var X = { name:'xxx', email:'xxx@163.com', website
复制链接

扫一扫