js面向对象编程代码
2012-12-06 11:19
183 查看
<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JavaScript 面向对象编程，严格过程的标准化编程法，目前为止最好的 JS 生成对象代码结构
- JavaScript 面向对象编程，严格过程的标准化编程法，目前为止最好的 JS 生成对象代码结构
- js便签笔记（6）——jQuery中的ready()事件为何需要那么多代码？
- js 点击切换选项卡代码、jq 点击切换选项卡代码
- js实现简洁的TAB滑动门效果代码
- js select 控制实现代码
- js类型检查实现代码
- js监听键盘事件代码
- browserify--将js代码解析为AST树并解析AST树
- [Javascript]JS当前页面和框架自动刷新的方法[脚本代码大全]
- 从select中选择option后如何转到相应的数据页面中去的JS代码
- 兼容ie和火狐的js无缝八向滚动特效代码
- React+react-dropzone+node.js实现图片上传的示例代码
- js 调用后台代码
- php/js获取客户端mac地址的实现代码
- 一段代码清晰说明js中的this
- JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
- JS 菜单栏一直悬浮在顶部代码