Javascript复习 及 面向对象写法
原创
©著作权归作者所有：来自51CTO博客作者踏行天下的原创作品，请联系作者获取转载授权，否则将追究法律责任
ExtJs北风网学习总结
1. JavaScript数据类准换
转换为Number：根据parseInt()来转化。
转换String：任何类型加字符串即为字符串。
转换Boolean：true,false,所有非0数字为true,否则为false
Undefind / null 直接转换为false
2. JavaScript数据专递
基本数据类型采用值传递：
3. JavaScript语法 函数与事件
函数和事件通常是一种绑定关系，通过事件调用函数。如果绑定多个函数，中间用分号隔开。
l 常用事件
l Onload
l OnClick
l MouseOver 鼠标移动到指定目标上
l MouseOut 鼠标离开指定目标
l Focus 当元素获得焦点
l Blur 当元素失去焦点
l Change 1.输入内容发生改变，2.select选项发生改变
l Onkeyup 键盘案件弹起
l 常用事件
l Onload
l OnClick
l MouseOver 鼠标移动到指定目标上
l MouseOut 鼠标离开指定目标
l Focus 当元素获得焦点
l Blur 当元素失去焦点
l Change 1.输入内容发生改变，2.select选项发生改变
l Onkeyup 键盘案件弹起
4. JavaScript面向对象编程
JavaScript定义属性和方法
方法一：
function Test(){
//javascript定义属性
Test.prototype.name="zsw";
//javascript定义方法
Test.prototype.say = function(){
alert(this.name + " love hy!");
};
}
function a(){
new Test().say(); //javascript调用方法
} |
方法二：
function boy(){
//js通过this定义属性
this.name = "zsw";
this.age = 21;
//js通过this定义方法
this.say = function(){
alert(this.name + " love hy!");
}
};
function b(){
var _boy = new boy();
alert(_boy.name);
alert(_boy.age+"");
_boy.say();
}; |
总结:
定义属性，方法 1.使用prototype创建 2.使用this创建 |
5. Json的方式创建对象
var json = {name:'zsw',age:20};
alert(json.name); |
function showName(o){
alert(o.name);
alert(o["name"]);
}
function showObject(){
var json = "{name:'zsw',age:20}";
showName(eval（"("+json+")"));
} |
Json对象是可以传递的
原理：JSON可以在字符串和对象间转换。 可以通过JavaScript的eval（)方法将字符串转换成对象。 |
6．动态添加属性和方法
function test1(){};
function runTest1(){
var t1 = new test1();
t1.name = "zsw";
t1.age = 21;
t1.say = function(){
alert("Hello World!!!");
};
alert(t1.name);
t1.say();
}; |
7.在内置对象添加属性和方法
8.Javascript面向对象中的继承
function Person(){
Person.prototype.name = "zsw";
Person.prototype.age = 21;
Person.prototype.say = function(){
alert("Javascript 面向对象的继承");
};
}
function Student(){
Student.prototype.schoolName = "bdqn";
}
function TestStu(){
Student.prototype = new Person();
var s = new Student();
alert(s.schoolName);
s.say();
} |
9．定义私有属性
function Person(){
Person.prototype.name = "zsw";
Person.prototype.age = 21;
Person.prototype.say = function(){
alert("Javascript 面向对象的继承");
};
}
function Student(){
Student.prototype.schoolName = "bdqn";
//定义私有属性
var gfName = "hy";
}
function TestStu(){
Student.prototype = new Person();
var s = new Student();
alert(s.schoolName);
s.say();
alert(s.gfName); //不可见，因为访问的私有属性
} |
10.定义静态属性
function Person(){
Person.prototype.name = "zsw";
Person.prototype.age = 21;
Person.prototype.say = function(){
alert("Javascript 面向对象的继承");
};
}
function Student(){
Student.prototype.schoolName = "bdqn";
//定义私有属性
var gfName = "hy";
Student.cityName = "深圳";
}
function TestStu(){
Student.prototype = new Person();
var s = new Student();
alert(s.schoolName);
s.say();
alert(s.gfName); //不可见，因为访问的私有属性
//访问静态属性
alert(Student.cityName);
} |
11.Json对象
定义Json对对象，在对象中添加属性：
function jsonTest(){
var jsonObj = {
name:'周尚武',
sex:'男',
age:21
};
alert(jsonObj.name);
} |
Json添加方法：
function jsonTest(){
var jsonObj = {
name:'周尚武',
sex:'男',
age:21,
say:function(){
alert("Json对象中添加方法!");
}
};
alert(jsonObj.name);
jsonObj.say();
} |
Json添加子对象：
function jsonTest(){
var jsonObj = {
name:'周尚武',
sex:'男',
age:21,
say:function(){
alert("Json对象中添加方法!");
}
};
alert(jsonObj.name);
jsonObj.say();
var jsonArray = ["A","B","C"];
alert(jsonArray[0]);
} |
在此复习一下静态方法
function test(){
test.prototype.name="huangyi";
test.cityName="深圳";
}
function T(){
alert(test.cityName); //将输出undefined
} |
以上调用test.cityName必须先把test实例化一下：
function test(){
test.prototype.name="huangyi";
test.cityName="深圳";
}
function T(){
new test();
alert(test.cityName);
} |
总结：
Javascript面向对象和所有面向对象编程语言一样，都是通过实例化的方式进行访问，两个对象间的非静态变量不会被干扰。 JSON中，属性可以是方法，甚至可以是一个子对象。 使用静态变量，需要实例化一下function，告诉浏览器它不是函数，而是对象。 |
12.方法覆盖
function test(){
test.prototype.name = "zsw";
test.prototype.age = 21;
test.prototype.say=function(){
alert("Hello World!");
}
}
function T(){
var t = new test();
t.say = function(){
alert("你好!");
}
t.say();
} |
13.重写window.alert();提示框
<script type="text/javascript">
function run(){
window.alert = function(s){
var o = document.getElementById("Layer1");
o.innerHTML = "<input name='button' type='button' οnclick='closeWin()' value='关闭' />"+s;
o.style.display = "block";
}
window.show = function(s){
alert(s);
}
show('zsw love hy！！');
}
function closeWin(){
var o = document.getElementById("Layer1");
o.style.display = "none";
}
</script>
<style type="text/css">
<!--
#Layer1 {
position:absolute;
left:341px;
top:168px;
width:296px;
height:142px;
z-index:1;
color:#FFFFFF;
display:none;
background-color:#00CC99;
}
-->
</style>
</head>
<body>
<div id="Layer1">
</div>
<input type="button" value="点击" οnclick="run()" />
</body> |
补充：javascript复制继承法
<mce:script type="text/javascript"><!--
function dw(s){
alert(s);
}
Function.prototype.extend_p = function(obj){
for(var i in obj){
this.prototype[i] = obj[i];
}
}
Person = function(){
this.name = "accp";
this.setName = function(obj){
this.name = obj;
}
this.getName = function(){
return this.name;
}
}
Student = function(){
}
Student.extend_p(new Person());
var s = new Student();
s.setName('黄翊');
dw(s.getName());
// --></mce:script>
Javascript 原始继承法
<!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=gb2312" />
<title>javascript原始继承法</title>
<mce:script type="text/javascript"><!--
function ds(s){
alert(s);
}
Person = function(){
this.name = "hy";
this.setName = function(obj){
this.name = obj;
}
this.getName = function(){
return this.name;
}
}
Student = function(){
this.stuNo = "0001";
}
Student.prototype = new Person();
var stu = new Student();
stu.setName('黄翊');
alert("名字："+stu.getName());
alert("编号："+stu.stuNo);
// --></mce:script>
</head>
<body>
</body>
</html>
