基于对象?面向对象?
JS是一门基于对象、事件驱动编程的客户端脚本语言。为什么JS不是面向对象的语言?因为面向对象包括三大特征:封装、继承、多态。JS中只有封装,继承也只是模拟继承,谈不上面向对象。所有说,在JS中,一切都是对象,属性、数组、函数等等都是对象。
JS中没有重载
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
// function test () {
// alert('test');
// }
//
//
// function test (x) {
// alert(x);
// }
//
// function test (x,y) {
// alert('x='+x+',y='+y);
// alert(x,y);
// }
//不写形参占位符,直接用arguments[]访问传过来的实参
function test () {
alert(arguments[0]);
}
test(10);
</script>
</head>
<body>
</body>
</html>
JS中没有重载,后面定义的同名函数会把前面的函数覆盖掉,永远只调用最后一个,而且JS中的形参只是占位符,定义两个形参,可以只传一个参数,只是为了方便程序员传来的实参。不写形参时,实参不能方便使用占位符,这时使用隐式形参arguments[0]来访问第一个实参,arguments[1]访问第二个实参 等等。
使用函数模拟类
一般类的名称首字母大写,1.定义类时同时有了构造函数,2.方法的属性值是函数。
示例:
<script type="text/javascript">
function Student (sno,sname,age) {
this.sno = sno;
this.sname = sname;
this.age = age;
this.study = function(){
alert('我是'+this.sname+',我在学习')
}
}
var stu = new Student(1,'xiaoming',20);
stu.study();
</script>
二、使用Object类创建即时对象
delete stu.name;//可以删除属性
示例:
<script type="text/javascript">
var stu = new Object();
stu.sno = 1;
stu.sname = 'xiaoming';
stu.age = 20;
stu.study = function(){
alert('我是'+this.sname+',我在学习');
}
stu.study();
</script>
三、使用JSON来创建对象
JSON(JavaScript Object Notation),类似于XML,是一种数据交换格式。
方式1:
//1.创建对象
// var stu = {
// “sno”:1,
// “name”:’xiaoming’,
// “study”:function(){
// alert(this.name+’在学习’)
// }
// }
// stu.study();
方式2:
var student=[
{“sno”:1,
“name”:’xiaoming’,
“study”:function(){
alert(this.name+’在学习’)
}
},
{
“sno”:2,
“name”:’xiaomi’,
“study”:function(){
alert(this.name+’在学习’)
}
},
{
“sno”:3,
“name”:’xiaom’,
“study”:function(){
alert(this.name+’在学习’)
}
}];
student[0].study();
减少全局变量的污染
我们写程序时,应尽量减少使用全局变量,同名容易冲突,这叫做全局变量的污染。例如:js和jQuery同时定义全局变量a,都引入页面中,后者会覆盖前者。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../A.js" type="text/javascript" charset="utf-8"></script>
<script src="../B.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
alert(myJs.a);
alert(myJQuery.a)
</script>
</head>
<body>
</body>
</html>
A.js
var myJs={};
myJs.a='A';
B.js
var myJQuery={};
myJQuery.a='B';
最好的方式,一个程序中,只定义一个全局变量,使用JSON,如上。
闭包
目的:使用闭包实现信息隐蔽,减少全局变量的污染,实现模块化开发。
1.在函数中定义函数,通过闭包放大了全局变量的作用域。new外部函数的对象,运行函数,内部函数的作用域就放大了。
2.在函数中定义JSON对象,返回这个对象,对象内部定义方法。
示例:
第一种方式:
<script type="text/javascript">
function outer () {
var a = 10;
function inner () {
alert(a++);
}
return inner;
}//a 的作用域到这
var test = outer();
test();//使用闭包放大了 a 的作用域
test();//使用闭包放大了 a 的作用域
test();//使用闭包放大了 a 的作用域
</script>
第二种方式:
<script src="bibao2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// User.add();
// Category.add();
//
// jQuery.add();//另起的名字
// $.add();
// document.write(User);
</script>
bibao2.js
var User = (function(winObj){//还可以把整个window对象传进来
var i = 111;//区分各个工程,避免全局变量的污染
var jsonObj = winObj.jQuery = winObj.$ ={
"add":function () {
alert("增加用户"+i);//+i 区分工程
},
"update":function () {
alert("更改用户");
},
"delete":function () {
alert("删除用户");
}
}
// return i;
return jsonObj;
})(window);
var Category=(function () {
var i = 222;//同名,因为闭包,两个i互不影响
return{ //直接return jsonObj
"add":function(){
alert('增加商品数量'+i);
},
"update":function(){
alert('更改商品数量');
},
"delete":function(){
alert('删除商品');
}
};
})();
模拟继承
一、使用call()函数来模拟继承
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function Person (name,age) {
this.name = name;
this.age = age;
this.eat = function(){
alert('姓名:'+this.name+",年龄:"+this.age+",我在吃饭");
}
}
function Student(sno,name,age){
Person.call(this,name,age);//相当于super(name,age)
this.sno = sno;
this.study = function(){
alert('学号:'+this.sno+',姓名:'+this.name+",年龄"+this.age+",我在学习");
}
}
var stu = new Student(1,'xiaoming',22);
stu.eat();
stu.study();
</script>
</head>
<body>
</body>
</html>
二、使用apply()函数来模拟继承
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function Person (name,age) {
this.name = name;
this.age = age;
this.eat = function(){
alert('姓名:'+this.name+",年龄:"+this.age+",我在吃饭");
}
}
function Student(sno,name,age){
Person.apply(this,[name,age]);//相当于super(name,age)
this.sno = sno;
this.study = function(){
alert('学号:'+this.sno+',姓名:'+this.name+",年龄"+this.age+",我在学习");
}
}
var stu = new Student(1,'xiaoming',22);
stu.eat();
stu.study();
</script>
</head>
<body>
</body>
</html>
三、使用原型prototype模拟继承
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function Person (name,age) {
this.name = name;
this.age = age;
this.eat = function(){
alert('姓名:'+this.name+",年龄:"+this.age+",我在吃饭");
}
}
function Student(sno,name,age){
this.sno = sno;
this.name = name;
this.age = age;
this.study = function(){
alert('学号:'+this.sno+',姓名:'+this.name+",年龄"+this.age+",我在学习");
}
}
//1.创建父类对象
var person = new Person();
//2.子类.prototype = person;
Student.prototype = person;
//把父类的原型赋值给子类的原型,原型一致,模拟实现了继承。
//但是会丢失子类的属性值,全变成了undefined,即使new 对象时加上了,也不起作用
//打脸,xiaoming既吃饭也学习
var stu = new Student(1,'xiaoming',20);
//动态的添加方法,即使在new对象之前没有这个方法
Student.prototype.test = function() {
alert('test动态添加方法');
}
stu.eat();
stu.study();
stu.test();
</script>
</head>
<body>
</body>
</html>
通过类的prototype属性,可以获知该类有那些属性和方法。
//1.创建父类对象
var person = new Person();
//2.子类.prototype = 父类对象
Student.prototype = person ;
//把父类的原型赋值给子类对象的原型,原型一致,模拟实现了继承。