2--理解并学习javascript中的面向对象(OOP)(续)
来源:互联网 发布:诺基亚n8刷windows 编辑:程序博客网 时间:2024/06/06 02:13
2.下面部分代码,是从另外一个角度讲解javascript中的面向对象编程。是借鉴EasyJF开源团队的讲解,我个人做了一些补充和说明。
- <!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>
- <title>javascript面向对象编程</title>
- <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
- <script type="text/javascript">
- $(function () {
- // function animal(name) {
- // this.name = name;
- // this.age = 0;
- // }
- // var a1 = animal;
- // alert(a1);//弹出整个函数体
- // var a2 = animal("dinglang");
- // alert(a2); //弹出undefined
- // var a3 = new animal();
- // alert(a3);//弹出object
- // var a4 = new animal;
- // alert(a4);//弹出object
- //求值
- //alert(sum(1, 3)); //要求弹出结果为4
- // alert(sum(1, 3, 5, 4, 7)); //要求弹出结果为20
- //根据java或者C#的编程经验,首先想到的是函数重载。
- // function sum(a, b) {
- // return a + b;
- // }
- // function sum(a, b, c, d, e) {
- // return a + b + c + d + e;
- // }
- //不幸的是,javascript并不支持函数重载。如果照上面那么写,只有下面的那个函数才会生效
- //javascript支持可变参数的函数
- function sum() {
- var n = 0;
- for (var i = 0; i < arguments.length; i++) {
- n += arguments[i];
- }
- return n;
- }
- //javascript高级知识 -- 闭包
- //函数里面嵌套函数,且在外部被引用了,所以这个对象i不会被垃圾回收机制清除,所以i递增
- function f1() {
- var i = 0;
- var f2 = function () {
- i++;
- alert(i);
- }
- return f2; //f2对象指的是整个函数体
- }
- var f3 = f1(); // "f1()"就是指该函数的执行结果或者返回值 --f2
- // f3();//1
- // f3();//2
- // f3();//3
- //作用域与this关键字
- // var obj = new Object();
- // obj.v = "v is a object";
- // //相当于这么写
- // var obj2 = { v: "v is a object" };
- //作用域Scope
- var b1 = { v: "this is b1" };
- var b2 = { v: "this is b2" };
- function b(x, y) {
- // alert(this.v + "," + x + "," + y);
- }
- b("ding", "lang"); //undefined,"ding","lang"
- //调用b函数时,b函数中的this关键字指的是window对象.而Window对象中没有v对象,所以undefined
- //window.b("ding", "lang"); //undefined,"ding","lang" --与 b("ding", "lang");意义相同
- //b.call();//就等于b();
- //call函数的第一个参数表示的是函数的上下文 --表示b函数中的this 所以this关键字=b1
- // b.call(b1, "ding", "lang"); //this is b1,ding,lang
- //注意apply函数的用法:第一个参数表示的也是函数中的上下文。不过后面的参数要以数组的形式传递
- // b.apply(b2, ["ding", "lang"]); // //this is b1,ding,lang
- //关于作用域,再补充一点
- var b3 = { v: "this is b3",
- sayHello: function () {
- alert(this.v);
- }
- }
- // b3.sayHello(); //this is b3
- //b3.sayHello.call(b1); //会调用b1对象中的sayHello函数 -- this is b1
- // for ... in
- // var arr = new Array(); //new 一个js数组,与c#、java等编程语言不同,可以不指定长度
- // arr[0] = 1; //赋值
- // arr[1] = 2;
- // arr[2] = 3;
- //javascript支持直接定义赋值
- var arr = new Array(1, 2, 3);
- for (var i = 0; i < arr.length; i++) {
- // alert(arr[i]); //弹出 1,2 ,3
- }
- //注意:javascript中的for...in ,看起来与C#或者java中的foreach类似,但是不同
- for (var key in arr) {
- // alert(key);// 弹出0,1,2 key指的是键,而不是值。在C#的foreach中,“in”前的变量指的是值
- //alert(arr[key]);//可以使用这种方式取值 --key指的是键,也就是某个对象中包含的所有的对象,而不是值
- }
- //假如我没有firebug,想使用IE实现类似与firebug控制台中console.dir的功能,可以这样
- for (var key in window) {
- // 这样就能将window对象中,包含的全部对象迭代显示出来。也就实现了firebug中console.dir的功能
- //document.getElementById("key").innerHTML += (key + ":" + window[key] + "</br>");
- }
- //对象的删除(释放内存-- 在extjs组件中常用)
- // delete b3.v; //删除b3对象中的v成员
- // alert(b3.v); // undefined --因为v这个成员已经被删除了
- //类的修改,扩展(重点,难点)
- //1.假如我要实现一个简单的加法计算
- // var numOne = 5;//如果直接这么定义,那么下面的numOne.add(8);执行会报错
- //如果我这么写,下面调用就不会报错了(因为此时的numOne,是个类.相当于java或C#语言中原始的基本数据类型、包装类型)
- var numOne = new Number(5);
- numOne.add = function (numTwo) {
- return this + numTwo;
- }
- //alert(numOne.add); //undefined
- // alert(numOne.add(8));//这样写看起来没错,但是会报错--numOne.add is not a function
- var numThree = new Number(100);
- //如果我现在想要给numThree对象中也加上add这么一个函数
- //直接使用prototype这个特殊的属性来实现,给所有的Number类型实例都加入add函数
- Number.prototype.add = function (numTwo) {
- return this + numTwo;
- }
- alert(numThree.add(200).add(300)); //弹出600 100+200+300=600
- //说明所有的Number类型确实都具有了add这么一个函数 超级延时绑定--类的扩展
- //小例子 --扩展String类,给所有的String类加上sayILoveYou
- // String.prototype.sayILoveYou = function () {
- // alert(this.toString() + ", I Love You");
- // }
- // var strOne = "dinglang";
- // strOne.sayILoveYou();
- //javascript中的类的用法
- //使用构造函数的方式,定义简单的Person类(javascript函数也是一个类)
- function Person(name) {
- this.name = name;
- this.age = 20;
- var year = 2010; //定义一个私有的成员sex
- // this.sayHello = function () {
- // alert(this.name + ":今年" + this.age + "岁,HelloWold");
- //可以直接在这里面定义sayHello成员函数(特权方法),但是每次实例化该类的时候都会重新去定义,所有还是选择用prototype属性的方式
- //如果在sayHello函数中要使用year这个私有对象,就可以直接在此定义这个特权方法。这就是典型的“闭包”。
- }
- //如果使用了new关键字,说明Person就是一个类。否则的话,只是一个普通的函数
- var p1 = new Person("丁浪"); // new 一个Person类的实例
- var p2 = new Person("蔡世友"); //注意:别按照java或者C#的习惯,写成了Person p =new Person("XXX");
- //给Person这个自定义的类,添加一个sayHello函数
- Person.prototype.sayHello = function () {
- alert(this.name + ":今年" + this.age + "岁,HelloWold");
- }
- p1.sayHello();
- p2.sayHello();
- //实现javascript中的继承
- function classA(name) {
- this.name = name;
- this.showName = function () {
- alert(this.name);
- }
- }
- function classB(name) {
- //1)使用newMethod的方式实现继承
- // this.newMethod = classA;
- // this.newMethod(name);
- // delete this.newMethod; //释放对象
- //2)调用claasA这个函数,并把他的上下文(作用域)指向this(也就是classB类的实例)
- //这样也能实现继承效果(使用call或者apply)
- classA.call(this, name);
- //classA.apply(this,[name]);
- }
- objA = new classA("操作系统");
- objB = new classB("组成原理");
- objA.showName(); //弹出“操作系统”
- objB.showName(); //弹出“组成原理”
- })
- </script>
- </head>
- <body>
- <div id="key"> </div>
- </body>
- </html>
阅读全文
0 0
- 如何理解并学习javascript中的面向对象(OOP)
- 如何理解并学习javascript中的面向对象(OOP)
- 1--理解并学习javascript中的面向对象(OOP)
- 2--理解并学习javascript中的面向对象(OOP)(续)
- 如何理解面向对象编程(OOP)
- 面向对象编程(OOP)理解
- javascript中的面向对象理解(一)
- OOP(面向对象)
- java 面向对象编程(OOP)-个人理解
- 《Javascript权威指南》学习笔记之七:面向对象编程(OOP)
- 《Javascript权威指南》学习笔记之七:面向对象编程(OOP)
- 面向对象编程(OOP)面向对象编程(OOP)
- 面向对象特征(oop)
- 面向对象(OOP)------封装
- 面向对象编程(OOP)
- 面向对象编程(OOP)
- 面向对象编程(OOP)
- 面向对象(OOP)基础
- XSL常见问题及解决(二)有关Xpath
- 隐马尔科夫模型(HMM)
- windows下的navicat的安装、激活、汉化
- ELF目标文件结构
- HDU 题目1198 Farm Irrigation 并查集
- 2--理解并学习javascript中的面向对象(OOP)(续)
- 微机原理期中考试
- tortoisegit使用教程 --- 修改提交简易图文教程
- 算法概论 习题8.20
- jq insertBefore 的返回值
- tomcat版本换了报错:报错:The Apache Tomcat installation at this directory is version 8.5.6. A Tomcat 8.0 ins
- 今天研究jquery源码的收获
- 流媒体基本要点简述:如何在H264数据中获取PTS?
- github