js的对象化代码
来源：互联网 发布：学英语软件排行榜知乎 编辑：程序博客网 时间：2024/05/16 14:21
<!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 之后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 = "<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();
document.write("------------------------------------------<br>");
//组合
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>
<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 之后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 = "<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();
document.write("------------------------------------------<br>");
//组合
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>
- js的对象化代码
- 面向对象的JS代码
- js date对象的格式化代码
- 判断js对象是否拥有某一个属性的js代码
- js格式的字符串转换为对象的代码
- 使用面向对象的编程思想实现js代码
- 俄罗斯方块---找不到对象？（.js文件的代码）
- 模仿JQuery.extend函数扩展自己对象的js代码
- 模仿JQuery.extend函数扩展自己对象的js代码
- 使用JS编写一段面向对象的代码
- 使用JS编写一段面向对象的代码
- 一行代码完成js对象数组的深拷贝
- JS遍历对象属性(一行狗代码的事)
- JS获取对象代码示例
- js面向对象编程代码
- js代码积累：js对象复制
- ASP代码的对象化
- Jquery第一篇【介绍Jquery、回顾JavaScript代码、JS对象与JQ对象的区别】
- 当你学不进去的时候，试试“普瑞马法则”_教你如何科学用脑
- java中byte与十六进制串转换
- mysqldump备份还原和mysqldump导入导出语句大全详解
- 静态编译web server Appweb(带Matrixssl支持) For ARM9+ linux
- Array.prototype.slice.call(arguments,1)原理
- js的对象化代码
- linux sort 命令详解
- MARGIN 与padding区别
- 解决mysql“Access denied for user 'root'@'localhost'”
- 一位软件工程师的6年总结
- 分享博客
- thrift 入门介绍
- mysql show processlist state
- Linux常用命令大全
