js的对象化代码

ゞ浴缸里的玫瑰 2022-03-28 15:12 108阅读 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 = ' '; 
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+' '); 
\} 
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 之后call和apply不起作用 
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 = "Hello, I am "+this.name+", " 
\+"my email is: "+this.email+", " 
\+"my website is: "+this.website; 
document.write(hello+" "); 
\} 
//Person.sayHello(); 
var Student = Object.create(Person); 
Student.no = "1234567"; 
Student.dept ="computer science"; 
//使用Person的属性 
//document.write(Student.name+' '+Student.email+' '+Student.website+' '); 
//使用Person的方法 
//Student.sayHello(); 
//重载sayHello方法 
Student.sayHello = function() \{ 
var hello = "Hello, I am "+this.name+", "+ 
"my email is: "+this.email+", "+ 
"my websiteis: "+this.website+", "+ 
"my student no is: "+this.no+", "+ 
"my departent is: "+this.dept; 
document.write(hello+" "); 
\} 
//Student.sayHello(); 
//Prototype 
//Object.getPrototypeOf() 
Student.name = 'aaa'; 
document.write(''+Student.name+''); 
document.write(''+Object.getPrototypeOf(Student).name+''); 
Student.sayHello = function () \{ 
Object.getPrototypeOf(Student).sayHello.call(this); 
var hello = "my student no is:" +this.no+", "+ 
"my departent is:"+this.dept; 
document.write(hello+" "); 
\} 
//Student.sayHello(); 
document.write("------------------------------------------ "); 
//组合 
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() + ' '); 
//document.write(Person.paint() + ' '); 
 
 
//看看Person中有什么 
//document.write(''+Object.keys(Person)+' '); 
//document.write(Person.name+' '); 
 
 
//Prototype和继承 
var plus = function(x,y) \{ 
document.write(x+'+'+y+'='+(x+y)+' '); 
return x+y; 
\} 
var minus = function(x,y) \{ 
document.write(x+'-'+y+'='+(x-y)+' '); 
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+", "+ 
"my email is: "+this.email+", "+ 
"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)+' '; 
hello += "my student no is: "+this.no+", "+ 
"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>