Javascript面向对象及组件开发的详细介绍（一）

最新推荐文章于 2022-05-27 12:48:21 发布

午夜玫瑰钻

最新推荐文章于 2022-05-27 12:48:21 发布

阅读量582

点赞数

分类专栏：前端Javascript相关操作说明文章标签： javascript 函数框架面向对象

本文链接：https://blog.csdn.net/gujinapenggu5/article/details/50437068

版权

48 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
var arr = [];
arr.number = 10; //对象下面的变量：叫做对象的属性
//alert( arr.number );
//alert( arr.length );
arr.test = function(){ //对象下面的函数 : 叫做对象的方法
alert(123);
};
arr.test();
arr.push();
arr.sort();
</script>
</head>
<body>
</body>
</html>

创建第一个面向对象程序

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
//var obj = {};
var obj = new Object(); //创建了一个空的对象
obj.name = '小明'; //属性
obj.showName = function(){ //方法
alert(this.name);
};
obj.showName();
var obj2 = new Object(); //创建了一个空的对象
obj2.name = '小强'; //属性
obj2.showName = function(){ //方法
alert(this.name);
};
obj2.showName();
</script>
</head>
<body>
</body>
</html>

工厂方式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
//工厂方式 : 封装函数
function createPerson(name){
//1.原料
var obj = new Object();
//2.加工
obj.name = name;
obj.showName = function(){
alert( this.name );
};
//3.出场
return obj;
}
var p1 = createPerson('小明');
p1.showName();
var p2 = createPerson('小强');
p2.showName();
</script>
</head>
<body>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
//当new去调用一个函数 : 这个时候函数中的this就是创建出来的对象,而且函数的的返回值直接就是this啦(隐式返回)
//new后面调用的函数 : 叫做构造函数
function CreatePerson(name){
this.name = name;
this.showName = function(){
alert( this.name );
};
}
var p1 = new CreatePerson('小明');
//p1.showName();
var p2 = new CreatePerson('小强');
//p2.showName();
alert( p1.showName == p2.showName ); //false
var arr = new Array();
var date = new Date();
</script>
</head>
<body>
</body>
</html>

对象的引用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
/*var a = [1,2,3];
var b = [1,2,3];
alert( a == b ); //false*/
//var a = 5;
//var b = a;
//b += 3;
alert(b); //8
//alert(a); //5 基本类型 : 赋值的时候只是值的复制
//var a = [1,2,3];
//var b = a;
//b.push(4);
alert(b); //[1,2,3,4]
//alert(a); //[1,2,3,4] 对象类型 : 赋值不仅是值的复制，而且也是引用的传递
//var a = [1,2,3];
//var b = a;
//b = [1,2,3,4];
alert(b); //[1,2,3,4]
//alert(a); //[1,2,3]
//var a = 5;
//var b = 5;
//
//alert(a == b); //基本类型 : 值相同就可以
//var a = [1,2,3];
//var b = [1,2,3];
//alert( a == b ); //false //对象类型 : 值和引用都相同才行
var a = [1,2,3];
var b = a;
alert( a==b ); //true
</script>
</head>
<body>
</body>
</html>

原型的详细介绍

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
//原型 : 去改写对象下面公用的方法或者属性 , 让公用的方法或者属性在内存中存在一份 ( 提高性能 )
//原型 : CSS中的class
//普通方法 : CSS中的style
//原型 : prototype : 要写在构造函数的下面
/*var arr = [1,2,3,4,5];
var arr2 = [2,2,2,2,2];
arr.sum = function(){
var result = 0;
for(var i=0;i<this.length;i++){
result += this[i];
}
return result;
};
arr2.sum = function(){
var result = 0;
for(var i=0;i<this.length;i++){
result += this[i];
}
return result;
};
//alert( arr.sum() ); //15
//alert( arr2.sum() ); //10*/
var arr = [1,2,3,4,5];
var arr2 = [2,2,2,2,2];
Array.prototype.sum = function(){
var result = 0;
for(var i=0;i<this.length;i++){
result += this[i];
}
return result;
};
alert( arr.sum() ); //15
alert( arr2.sum() ); //10
</script>
</head>
<body>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
var arr = [];
//arr.number = 10;
Array.prototype.number = 20;
alert(arr.number);
</script>
</head>
<body>
</body>
</html>

工厂方法之原型

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
//当new去调用一个函数 : 这个时候函数中的this就是创建出来的对象,而且函数的的返回值直接就是this啦(隐式返回)
//new后面调用的函数 : 叫做构造函数
function CreatePerson(name){
this.name = name;
}
CreatePerson.prototype.showName = function(){
alert( this.name );
};
var p1 = new CreatePerson('小明');
//p1.showName();
var p2 = new CreatePerson('小强');
//p2.showName();
alert( p1.showName == p2.showName ); //true
var arr = new Array();
var date = new Date();
</script>
</head>
<body>
</body>
</html>

关注

专栏目录