Javascript复习 及 面向对象写法

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' onclick='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="点击" onclick="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>