javaScript 继承

最新推荐文章于 2024-08-04 16:17:01 发布
jwmxxx
最新推荐文章于 2024-08-04 16:17:01 发布
阅读量178
点赞数
分类专栏： js 继承文章标签： js
js 继承专栏收录该内容
0 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        function employee(name, job, born) {
            this.name = name;
            this.job = job;
            this.born = born;
        }

        var bill = new employee("Bill Gates", "Engineer", 1985);

        employee.prototype.salary = null;
        bill.salary = 20000;

        //    document.write(bill.salary);


        var arr = new Array(3)
        arr[0] = "George"
        arr[1] = "John"
        arr[2] = "Thomas"
        //    document.write(arr.join("."))


        var str = "is this alL there is?"
        var patt1 = /[ate]/g;
        document.write(str.match(patt1))

        function toast() {
            var x = document.getElementById("fname").value;
            document.getElementById("fname").value = x.toUpperCase()
        }

        //        var person = new Object();
        //        person.name = 'sxx';
        //        person.age = 29;
        //        person.sayHello = function () {
        //            alert(this.name)
        //        }
        //        var person = {
        //            name:'sxx',
        //            age:20,
        //            sayHello:function () {
        //                alert(this.name+'age'+this.age)
        //            }
        //        }
        /**
         * 工厂模式
         * @param event
         * 缺点没有解决对象识别的问题（即怎么知道一个对象的类型）
         */
        //        function createPerson(name, age, job) {
        //            var person = new Object();
        //            person.name = 'sxx';
        //            person.age = 29;
        //            person.job = job;
        //            person.sayHello = function () {
        //                alert(this.name+'age'+this.age+'job'+this.job)
        //            }
        //        return person;
        //        }

        //构造函数模式创建对象
        //优点：没有显示的创建对象    直接把属性和方法赋值给了this   没有return
        /**
         *
         * @param name
         * @param age
         * @param job
         * @constructor
         * 缺点：共同的方法 每创建个对象 都会 创建个新的方法
         */
        //        function Person(name,age,job) {
        //            this.name = name;
        //            this.age = age;
        //            this.job = job;
        //            //共同的方法 每创建个对象 都会 创建个新的方法
                    this.sayHello = function () {
                        alert(this.name+"age"+this.age+'job'+this.job)
                    }
        //
        //            //解决方案
        //            //但这个解决方案要把该函数定义在全局变量中，但这个全局函数只是为了让指定的对象调用的，放在全局有点名副其实
        //            //更糟糕的是 如果对象定义很多方法，那么就需要定义很多全局函数，于是我们这个自定义的引用类型就丝毫没有封装性可言了
        //            //解决方案可以通过原型模式来解决
        //            this.sayHello = sayHello;
        //        }
        //        function sayHello() {
        //            alert(this.name+"age"+this.age+'job'+this.job)
        //        }

        /**
         * 原型模式   但原型模式的缺点在于 如果protopype 中包含引用类型时   任何一个实例的修改都将导致 其他实例的修改
         * 组合使用构造函数模式和原型模式
         * @constructor
         */
        //        function Person() {
        //
        //        }
        //        Person.prototype = {
        //            constructor:Person,
        //            name:'sasasa',
        //            age:20,
        //            job:"shanghai",
        //            sayHello:function () {
        //                alert(this.name+"age"+this.age+'job'+this.job)
        //            }
        //        };

        /**
         * 组合使用构造函数模式和原型模式
         * 这种构造函数与原型混成的模式，是目前ECMASCRIPPR中使用最广泛、认同度最高的一种创建自定义类型的方法
         * @param name
         * @param age
         * @param job
         * @constructor
         */
        //        function Person(name, age, job) {
        //            this.name = name;
        //            this.age = age;
        //            this.job = job;
        //            this.friends = ['sasas','1111']
        //        }
        //        Person.prototype = {
        //            constructor:Person,
        //            sayHello:function () {
        //                alert(this.name+"age"+this.age+'job'+this.job)
        //            }
        //        }


        /**
         *动态模式
         * @param name
         * @param age
         * @param job
         * @constructor
         */
//        function Person(name, age, job) {
//            this.name = name;
//            this.age = age;
//            this.job = job;
//            if(typeof this.sayHello !="function"){
//                Person.prototype.sayHello = function () {
//                    alert("bababbbabab")
//                }
//            }
//        }


        /-----------------------------继承-----------------------------/


        /**
         * 原型链  虽然很好  但也会出现 原型模式的那种 引用变量的值被所有的 实例公用
         * @constructor
         */
        //        function SuperType() {
        //            this.property = true;
        //        this.colors = ["sasa", 'sasa', 'sasa'];
        //        }
        //        SuperType.prototype.getSuperVaule = function () {
        //            return this.property;
        //        }
        //
        //        function SubType() {
        //            this.subproperty = false;
        //        }
        //        SubType.prototype = new SuperType();
        //
        //        SubType.prototype.getSubValue = function () {
        //            return this.subproperty;
        //        }

        /**
         * 借用构造函数 该模式的基本思想相当简单，即在子类型构造函数的内部调用超类的构造函数
         * 缺点 如果仅仅是借用构造函数，那么也将无法避免构造函数模式存在的问题，问题都在构造函数中定义
         * ，因此函数复用就无从谈起。而且，在超类的原型中定义的方法，对于子类型而言也是不可见的
         * @constructor
         */
        //        function SuperType() {
        //            this.colors = ['red', 'blue', 'green']
        //        }
        //
        //        function SubType() {
        //            SuperType.call(this);
        //        }


        /**
         * 组合模式
         * @param name
         * @constructor
         */
        function SuperType(name) {
            this.name = name;
            this.color = ['sasa', 'sasa', 'sasasa'];
        }

        SuperType.prototype.sayHello = function () {
            alert(this.name);
        }

        function SubType(name, age) {
            //继承属性
            SuperType.call(this, name);
            this.age = age;
        }

        //继承方法
        SubType.prototype = new SuperType();
        SubType.prototype.constructor = SubType;
        SubType.prototype.sayHello = function () {
            alert(this.name + this.age)
        }


        function isKeyPress(event) {
//            if(event.altKey==1){
//                alert("ALT")
//            }
//            else{
//                alert("not"+event.clientX)
//            }
//            var person = new Person("sxx",20,'henan')
//            person.sayHello();
            var instance = new SubType();
            alert(instance.getSubValue())
        }

        function accesskey() {
//            document.getElementById('w3').accessKey="H"
        }

    </script>
</head>
<body οnlοad="accesskey()" οnmοusedοwn="isKeyPress(event)">
<input type="text" id="fname" οnblur="toast()">
<a id="w3" href="http://www.baidu.com">点击跳转</a>
</body>
</html>