BlogJava-Alex刺客 Blog-随笔分类-javaScript

9.javaScript继承原型链方式

Alex刺客 — Mon, 14 Dec 2009 07:11:00 GMT

1DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3    <head>
4        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5        <title>原型链方式title>
6        <script type="text/javascript">
7            /*
8            *    项目： book -> Javascript高级程序设计.pdf -> 第四章 -> 4.2.1 继承的方式
9            *    说明：使用prototype属性
10            *    练习者: Alex刺客
11            *    日期: 2009-12-13
12            */
13
14            /*
15                原型链方式
16                原型链的神奇之处在于突出显示的代码，这里把ClassB的prototype属性设置成ClassA的实例。
17                这很有意义，因为想要ClassA的所有属性和方法。所以把ClassB的全部属性设置成ClassA的实例。
18                因为这种继承方式使用了prototype属性，所以instanceof运算符可以正确运行。
19            */
20            function ClassA () {}
21
22            ClassA.prototype.color = 'red';
23            ClassA.prototype.sayColor = function () {
24                alert(this.color);
25            }
26
27            function ClassB () {}
28            ClassB.prototype = new ClassA();
29            //添加新方法
30            ClassB.prototype.name = "ClassB";
31            ClassB.prototype.sayName = function () {
32                alert(this.name);
33            }
34
35            /*
36                混合方式对象冒充+原型链
37                跟建造类一样的问题也出现在继承当中，所以也就产生了这种方式。
38                用对象冒充继承构造函数，用原型链继承prototype对象的方法。
39            */
40
41            function ClassD ( sColor) {
42                this.color = sColor;
43                if(typeof ClassD._initMethod == "undefined") {
44                    ClassD.prototype.sayColor = function () {
45                        alert(this.color);
46                    }
47                    alert('ClassD我只生成一次!');
48                    ClassD._initMethod = true;
49                }
50            }
51            var cd = new ClassD();
52            function ClassE (sColor, sName) {
53                ClassD.call(this,sColor);
54                this.name = sName;
55                if(typeof ClassE._initMethod == "undefined") {
56                    ClassE.prototype.sayName =function () {
57                        alert(this.name);
58                    }
59                    alert('ClassE我只生成一次!');
60                    ClassE._initMethod = true;
61                }
62            }
63            ClassE.prototype = new ClassD();
64            /*
65                继承机制不能采用动态化的原因是，prototype对象的唯一性。如果放入 if 区域
66                在代码运行前，对象已被实例化了，并与原始的prototype对象联系在一起。虽然用极
67                晚绑定可使对原型对象的修改正确地返映出来，但是替换prototype对象却不会对该对象
68                产生任何影响。只有未来的对象实例才会反映出这种改变，这就使第一个实例变得不正确。
69
70            */
71
72            var ce1 = new ClassE("red","blueBoy");
73            var ce2 = new ClassE("blue","redBoy");
74            ce1.sayColor();
75            ce1.sayName();
76            ce2.sayColor();
77            ce2.sayName();
78
79
80        script>
81    head>
82    <body>
83    body>
84html>

Alex刺客 2009-12-14 15:11 发表评论

9.javaScript继承对象冒充方式

Alex刺客 — Mon, 14 Dec 2009 07:10:00 GMT

1DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3    <head>
4        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5        <title>对象冒充方式title>
6        <script type="text/javascript">
7            /*
8            *    项目： book -> Javascript高级程序设计.pdf -> 第四章 -> 4.2.1 继承的方式
9            *    练习者: Alex刺客
10            *    日期: 2009-12-13
11            */
12
13            /*
14                1.对象冒充
15            */
16            //ClassA类
17            function ClassA (sColor) {
18                this.color = sColor;
19                this.sayColor = function () {
20                        alert(this.color);
21                    }
22            }
23
24            //ClassB类
25            function ClassB(sColor,sName){
26                //当前对象的属性是ClassA函数的指针
27                this.newMethod = ClassA;
28                //把参数传递给它
29                this.newMethod(sColor);
30                //删除当前对象的ClassA函数的指针
31                delete this.newMethod;
32
33                //新增属性和方法
34                this.name = sName;
35                this.sayName = function () {
36                    alert(this.name);
37                }
38            }
39
40            //var cb = new ClassB("blue!","Redboy");
41            //cb.sayColor();
42            //cb.sayName();
43
44            /*
45                call()方法
46                call()方法与对象冒充方法最相似。它的第一个参数用作this的对象。
47                其他参数都直接传递给函数自身。
48            */
49            //ClassC类
50            function ClassC(sColor,sName){
51                //this.newMethod = ClassA;
52                //this.newMethod(sColor);
53                //delete this.newMethod;
54                ClassA.call(this,sColor); //以上三行代码由这行替代
55
56                //新增属性和方法
57                this.name = sName;
58                this.sayName = function () {
59                    alert(this.name);
60                }
61            }
62
63            //var cc = new ClassC("blue","c");
64            //cc.sayColor();
65            //cc.sayName();
66
67            /*
68                apply()方法
69                apply()方法有两个参数，跟call()方法相似，只是第二个参数变成了数组。
70            */
71            //ClassD类
72            function ClassD(sColor,sName){
73                //this.newMethod = ClassA;
74                //this.newMethod(sColor);
75                //delete this.newMethod;
76                ClassA.apply(this,new Array(sColor)); //以上三行代码由这行替代
77
78                //新增属性和方法
79                this.name = sName;
80                this.sayName = function () {
81                    alert(this.name);
82                }
83            }
84
85            //var dt = new ClassD("red","blueBoy");
86            //dt.sayColor();
87            //dt.sayName();
88
89        script>
90    head>
91    <body>
92    body>
93html>

Alex刺客 2009-12-14 15:10 发表评论

8.javaScript修改对象：创建新方法

Alex刺客 — Mon, 14 Dec 2009 07:00:00 GMT

Alex刺客 2009-12-14 15:00 发表评论

8.javaScript定义类的例子

Alex刺客 — Mon, 14 Dec 2009 06:54:00 GMT

Alex刺客 2009-12-14 14:54 发表评论

7.定义javaScript类或对象

Alex刺客 — Mon, 14 Dec 2009 06:52:00 GMT

摘要: 1 2阅读全文

Alex刺客 2009-12-14 14:52 发表评论

6.javaScript类型转换

Alex刺客 — Mon, 14 Dec 2009 06:50:00 GMT

1DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3    <head>
4        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5        <title>类型转换title>
6        <script type="text/javascript">
7            /*
8            *    项目： book -> Javascript高级程序设计.pdf -> 第2章 -> 2.6 原始类型
9            *
10            *    练习者: Alex刺客
11            *
12            *    日期: 2009-12-13
13            */
14
15            /*
16                转换成字符串
17                ECMAScript 的 Boolean、Number、String这此原始类型有趣在于它们都是伪对象
18                这意味着它们实际上具有属性和方法。例如获得字符串的长度，可以用length属性。
19            */
20            var sColor = "red";
21            alert(sColor+"的长度是："+sColor.length);
22            //outputs "3"
23
24            /*
25                3种主要的原始类型值Boolean、Nnmber、String 都有 toString()方法。不要感到奇怪
26                String还有toString()方法。这是因为ECMAScript定义所有对象都有toString()方法无论它
27                是伪对象，还是真的对象。因为String类型属于伪对象，所以它一定有toString()方法。
28            */
29            var str = "Alex刺客";
30            alert("String类型:'"+str+"'调用toString方法:虽然这是多余的：但我还是会给你："+str.toString());
31
32            /*
33                Number类型的toString()方法分为默认模式和基本模式。
34                采用基本模式时在调用toString()方法时传递一个参数比如：2 代表二进制， 8 代表八进制, 16代表十六进制
35            */
36
37            var n8Number = 017;
38            alert("八进制Number类型转换为String:"+n8Number.toString());
39            //如果以上不调用toString()方法，也会执行toString()方法
40            alert("以二进制转换成String:"+n8Number.toString(2));
41
42            /*
43                转换成数字
44                ECMAScript提供两种把非数字类型转换成数字类型的方法，即parseInt()和parseFloat()。
45                注意：这两个方法只转换无效字符之前的字符串。比如: "4.3zefef" 跟 '4.3.3' 结果都是  4.3
46            */
47
48                var iNumber = parseInt('1234');
49                var fNumber = parseFloat('0.88');
50                alert("字符串转换成数字整型:"+iNumber);
51                alert("字符串转换成数字浮点型:"+fNumber);
52
53                /*
54                    parseInt()方法还有基本模式，可以把二进制、八进制、十六进制或其他任何进制的字符
55                    转换成整数.是由parseInt()方法的第二个参数指定的。
56                    parseFloat()方法不支技基本模式
57                */
58
59                //转换为16进制
60                var i16 = parseInt("af", 16);
61
62
63
64                /*
65                    强制类型转换
66                    Boolean(value) ——把给定的值转换成Boolean型
67                    Number(value)——把给定的值转换成Number型
68                    String(value)——把给定的值转换成String型
69                */
70
71                var b1 = Boolean("");            //false
72                var b2 = Boolean('hi');        //true
73                var b3 = boolean(100);        //true
74                var b4 = boolean(null);        //false
75                var b5 = boolean(0);            //false
76                var b6 = boolean(new Object());    //true
77
78
79                /*
80                    最后一种强制类型转换方法String();可把任何值转换成字符串。
81                */
82
83        script>
84    head>
85    <body>
86    body>
87html>

Alex刺客 2009-12-14 14:50 发表评论

5.String类型

Alex刺客 — Mon, 14 Dec 2009 06:49:00 GMT

Alex刺客 2009-12-14 14:49 发表评论

4.Number类型

Alex刺客 — Mon, 14 Dec 2009 06:47:00 GMT

1DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3    <head>
4        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5        <title>Number类型title>
6        <script type="text/javascript">
7            /*
8            *    项目： book -> Javascript高级程序设计.pdf -> 第2章 -> 2.6 原始类型
9            *
10            *    说明:    Number类型可以表示32位的整数，还可以表示64的浮点数。任何数字都被看作Number类型
11            *
12            *    练习者: Alex刺客
13            *
14            *    日期: 2009-12-13
15            */
16            //整数
17            var iNumber = 55;
18            //八进制。以0开头
19            var iNumber8 = 070;
20            //十六进制。以0x开头
21            var iNumber16 = 0xAf;
22
23            /*
24            注意：尽管Number类型可以表示为八进制或十六进制的字面量，
25            但所有的数学运算都是返回十进制结果。
26            */
27            alert(iNumber8+iNumber16);
28            //定义浮点值
29            var fNumber = 5.0;
30            //定义非常大的数，可用科学记数法
31            var fNumberMax = 3.889e7;
32            /*
33            也可用64位IEEE754形式存储浮点值，这意味着十进制最多可以有17个十
34            进制位。17位之后的值将被截去，从而造成一些小的数学误差。
35
36            几个特殊值也被定义为Number 类型。前两两个是Number.MAX_VALUE
37            和Number.MIN_VALUE.它们定义了Number值集合的外边界。
38            所有的ECMAScript数都必须在这两个值之间。不过计算生成的数值结果可
39            以不落在这两个数之间。当计算生成的数大于Number.MAX_VALUE时，它
40            将被赋予Number.POSITIVE_INFINITY,意味着不再有数字值。同样，生成
41            的数值小于Number.MIN_VALUE的计算也会被赋予值Number.NEGATIVE_INFINITY，
42            也意味着不再有数字值。如果计算返回的是无穷大值，那么生成的结果不能再用于其它计算。
43            */
44
45            /*
46                由于无穷大数可以是正数也可以是负数，所以可用一个方法判断一个数是否是有穷的。
47                IsFinite(Number value)方法! value要判数的值
48            */
49
50            /*
51                最后一个特殊值是NaN，表示非数(Not a Number)。NaN是个奇怪的特殊值。一般来说
52                这种情况发生在类型转换失败时。与无穷大值一样，NaN也不能用于算术计算。NaN另一个
53                奇怪之处在于，它与自身不相等！
54            */
55
56            alert( NaN == NaN);
57            //false
58            //出于这种原因，不推荐使用NaN值本身。函数isNaN()会做得相当好。
59
60            alert("字符串'blue'不能转为数字类型"+isNaN("blue"));
61            //true
62            alert("字符串'123'不能转为数字类型"+isNaN("123"));
63            //false
64        script>
65    head>
66    <body>
67    body>
68html>

Alex刺客 2009-12-14 14:47 发表评论