当前位置:首页 > IT技术 > Web编程 > 正文

js高级---类/对象创建模式
2021-09-13 15:35:36

        // es5中的类
        // 1.最简单的类
            function Person(){
                this.name = 'zhangsan';
                this.age = 18;
            }
            var p = new Person();
            console.log(p.anme);
        
        // 2.构造函数和原型链里面增加方法
            function Person(){
                this.name = 'zhangsan';
                this.age = 18;
                this.run = function(){
                    console.log(this.name+'在run');
                }
            }
            原型链上面的属性会被多个实例共享 构造函数不会
            Person.prototype.sex = '男'; /* 属性 */
            Person.prototype.work = function(){ /* 实例方法 */
                console.log(this.name+'在work');
            }
            var p = new Person();
            p.run();
            p.work();
        
        // 3.类里面的静态方法
            function Person(){
                this.name = 'zhangsan';
                this.age = 18;
                this.run = function(){
                    console.log(this.name+'在run');
                }
            }
            Person.getGo = function(){
                console.log('我是静态方法')
            }
            Person.getGo(); /*调用静态方法 */
        
        // 4.es5里面的继承
            function Person(){
                this.name = 'zhangsan';
                this.age = 18;
                this.run = function(){
                    console.log(this.name+'在run');
                }
            }
            Person.prototype.sex = '男'; /* 属性 */
            Person.prototype.work = function(){ /* 实例方法 */
                console.log(this.name+'在work');
            }
            // 定义一个 web类继承 Person类 (原型链+对象冒充的组合模式)
            function Web(){
                Person.call(this)  /* 对象冒充实现继承*/
            }
            var w = new Web();
            w.run(); //对象冒充可以继承构造函数里面的属性和方法
            w.work(); //但是不能继承原型链上边的属性和方法
        
        // 5.es5里的继承  原型链实现继承
            function Person(){
                this.name = 'zhangsan';
                this.age = 18;
                this.run = function(){
                    console.log(this.name+'在run');
                }
            }
            Person.prototype.sex = '男'; /* 属性 */
            Person.prototype.work = function(){ /* 实例方法 */
                console.log(this.name+'在work');
            }
            // 定义一个 web类继承 Person类 (原型链+对象冒充的组合模式)
            function Web(){}
             //原型链实现继承:可以继承构造函数里面的方法和属性  也可以继承原型链上边的属性和方法
            Web.prototype = new Person();
            var w = new Web();
            w.work(); //
        
        // 6.原型链实现继承的   问题?
            function Person(name,age){
                this.name = name;
                this.age = age;
                this.run = function(){
                    console.log(this.name+'在run');
                }
            }
            Person.prototype.sex = '男'; /* 属性 */
            Person.prototype.work = function(){ /* 实例方法 */
                console.log(this.name+'在work');
            }
            // 定义一个 web类继承 Person类 (原型链+对象冒充的组合模式)
            function Web(name,age){}
            //原型链实现继承:可以继承构造函数里面的方法和属性  也可以继承原型链上边的属性和方法
            Web.prototype = new Person();
            var w = new Web('xiaolin',18); //实例化子类的时候不能给父类传参
            var w1 = new Web('xiaohong',17);
            w.work(); //undefined在work
        
        // 7.原型链+构造函数 的组合继承模式
            function Person(name,age){
                this.name = name;
                this.age = age;
                this.run = function(){
                    console.log(this.name+'在run');
                }
            }
            Person.prototype.sex = '男'; /* 属性 */
            Person.prototype.work = function(){ /* 实例方法 */
                console.log(this.name+'在work');
            }
            // 定义一个 web类继承 Person类 (原型链+对象冒充的组合模式)
            function Web(name,age){
                Person.call(this,name,age) //对象冒充继承 实例化子类可以给父类传参
            }
            //原型链实现继承:可以继承构造函数里面的方法和属性  也可以继承原型链上边的属性和方法
            Web.prototype = new Person();   //或者  Web.prototype = Person.prototype;
            var k = new Web('小米',20);
            k.run(); //小米在run
            k.work(); //小米在work

 

本文摘自 :https://www.cnblogs.com/

开通会员,享受整站包年服务立即开通 >