`
xiaotao.2010
  • 浏览: 212296 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

JS 笔记--中级篇

阅读更多

1、ECMAScript中的继承（inheritance）

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">



        function clickMe() {
            /* 实例化基类*/
            var superPerson = new SuperPerson();
            superPerson.getFriends();//111,222
            /* 实例化子类 */
            var sonPerson1 = new SonPerson();
            sonPerson1.getFriends(); //333,444
            //sonPerson1.sayName(); //正确写法 Tom
            // sonPerson1.sayAge();//错误写法

            sonPerson1.friends.push("999");
            sonPerson1.getFriends();//333,444,999

            var sonPerson2 = new SonPerson();
            sonPerson2.getFriends(); //333,444
            /* PS: 本处而非书上说的 sonPerson2.getFriends();输出结果是333,444,999
             * 未实现共享属性friends，实例中更改原型属性，并不能被另一实例所共享（书中解释存在异议）
             */
        }

        /* 基类*/
        function SuperPerson() { //基类构造函数，存放属性
            this.name = "Tom";
            this.sex = "F";
            this.age = 12;
            this.friends = ["111", "222"];
            
        }

        SuperPerson.prototype = { //基类原型模式，存放方法
            constructor: SuperPerson,
            getFriends: function () {
                alert(this.friends);
            }
        }

        /* 子类 */
        function SonPerson() { //子类构造函数，存放属性
            this.tel = 1389909;
            this.friends = ["333", "444"];
            this.sayName = function () { //子类中调用基类属性的方法必须存在构造函数模式中创建，不能使用原型模式创建【重点：正确写法】
                alert(this.name);
            }
        }
        SonPerson.prototype = new SuperPerson(); //SonPerson类继承SuperPerson类

        /* 【重点：错误写法】
        * 以上刚刚把SuperPerson的实例赋值给原型，又接着将原型替换成一个对象字面量而导致的问题
        * 由于现在的本原型包含的是一个Object的实例，而非SuperPerson实例
        * 因此我们设想中的原型链已近被切断--SubPerson和SuperPerson之间已经没有关系了
        *
        */
        //SonPerson.prototype = {
        //    sayAge: function () {
        //        alert(this.age);
        //    }
        //}


    </script>
</head>
<body>
    <form id="form1" runat="server">
    <input type="button" name="点我 " value="点我 " onclick="clickMe()" />
    </form>
</body>
</html>

 

2、组合继承（包括原型链和借用构造函数），又称为伪经典继承

 

构造函数模式：它的每个成员都无法得到复用，包括函数；

原型模式：使用构造函数的prototype属性来指定那些应该共享的属性和方法；

既使用组合继承来吸收两者的优先，创建实例属性独立，方法复用的对象。

 

<!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 id="Head1" runat="server">
    <title></title>
    <script type="text/javascript">
        // 【组合继承（实战用法）：包含了借用构造函数继承和原型链继承】
        // 【区别】
        /* 【借用构造函数】又称经典继承：目的借用构造函数来实现对实例属性的继承 */
        /* 【原型链继承】普通继承：目的使用原型链实现对原型属性和方法的继承 */

        function clickMe() {
            var superType = new SuperType();
            superType.getColors(); //111,222

            var subType1 = new SubType();
            subType1.getColors(); //111,222
            subType1.colors.push("333");
            subType1.getColors(); //111,222,333

            var subType2 = new SubType();
            subType2.getColors();//111,222


        }

        function SuperType() {
            this.colors = ["111","222"];
        }

        SuperType.prototype = {
            getColors: function () {
                alert(this.colors);
            }
        }


        function SubType() {
            SuperType.call(this); //经典继承：继承实例属性
        }

        SubType.prototype = new SuperType(); //原型链继承：继承方法

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <input type="button" name="点我 " value="点我 " onclick="clickMe()" />
    </form>
</body>
</html>

 

 3、JS的闭包

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestHelloWorld.aspx.cs"
    Inherits="TestWebButton.JavaScript.TestHelloWorld" %>

<!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 id="Head1" runat="server">
    <title></title>
    <script type="text/javascript">
        // 【闭包】
        /*【完美的闭包】
         * 1、在一个函数的生命周期内所有的属性都得到释放且独立；
         * 2、在函数内属性的作用域应该处于块作用域内（“{}”表示块作用域）；
         * 
        */


        function clickMe() {
        /* 在场景中 报错的为实现闭包 */
            showNameError(6); //7
            showNameRight(6); //报错,i未定义
            perfect(10); //报错，num未定义
        }

        /* 非闭包 */
        function showNameError(num) {

            for (var i = 0; i <= num; i++) {
                document.write( "</br>"+"Error : " + i );
            }

            alert(i); //7，此处i为function showNameError(num){}函数内作用域
        }

        /* 闭包 */
        function showNameRight(num) {
            /*
             *块级作用域（通常称为私有作用域）
             *(function () {
             *  })() 
             *不要小看这两个括号：1、第一个括号表示定义一个匿名函数；2、第二个括号表示执行这个匿名函数；
            */
            (function () {
                for (var i = 0; i <= num; i++) {
                    document.write("Right : " + i + "</br>");
                }
            })() 
            alert(i); //报错,i未定义
        }

        /* 完美的闭包 PS：我理解的 */
        function perfect(num_) {
            (function () {
                for (var i = 10; i <= num_; i++) {
                    var _num = document.getElementById("10").value; //JS不会主动将持有的DOM对象释放
                    var num = _num;
                    _num = null; //手动释放
                    document.write("Right : " + num + "</br>"); // num的作用域仅存在于块作用域中
                }               
            })()
           alert(num); //报错，num未定义
        }
       
        //clickMe();
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <input type="text" id="10" name="num" value="10" />
    <input type="button" name="点我 " value="点我 " onclick=" perfect(10)" />
    </form>
</body>
</html>

 

 

分享到：
| JS 笔记--基础篇
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics