zoukankan      html  css  js  c++  java
  • 3、es5创建对象和继承方式

    es5里面的类

    1、最简单的类
    function Person(){
      this.name = '张三';
      this.age = 20;
    }
    var p = new Person();
    alert(p.name);
    
    2、构造函数和原型链里面增加方法
    function Person(){
      this.name = '张三';
      this.age = 20;
      this.run=function(){
        alert(this.name + '在运动');
      }
    }
    Person.prototype.sex = '男';
    Person.prototype.work = function(){
      alert(this.name + '在工作');
    }
    var p = new Person();
    alert(p.name);
    p.run();
    p.work();
    

    es5中的两种继承

    1、构造函数继承(及对象冒充继承)

    function Person(){
      this.name = '张三';
      this.age = 20;
      this.run=function(){
        alert(this.name + '在运动');
      }
    }
    //原型链上面的属性会被多个实例共享 构造函数不会
    Person.prototype.sex = '男';
    Person.prototype.work = function(){
      alert(this.name + '在工作');
    }
    //web 继承Person类 原型链+对象冒充的组合继承模式
    function Web(){
      Person.call(this);//对象冒充实例继承
    }
    
    var w = new Web();
    // w.run(); //对象冒充可以继承构造函数中的属性和方法
    
    w.work(); //对象冒充无法继承原型链上的属性和方法
    //w.work is not a function 
    

      注意:对象冒充可以继承构造函数中的属性和方法,但无法继承原型链上的属性和方法。(Person.call(this))

    2、原型链继承

    function Person(){
      this.name = '张三';//属性
      this.age = 20;
      this.run=function(){//实例方法
        alert(this.name + '在运动');
      }
    }
    //原型链上面的属性会被多个实例共享 构造函数不会
    Person.prototype.sex = '男';
    Person.prototype.work = function(){
      alert(this.name + '在工作');
    }
    //web 继承Person类 原型链+对象冒充的组合继承模式
    function Web(){
      
    }
    Web.prototype=new Person();//原型链实现继承
    var w = new Web();
    // w.run(); //原型链实现继承:可以继承构造函数中的属性和方法 也可以继承原型链上的属性和方法
    
    w.work(); 
    

      注意:原型链实现继承:可以继承构造函数中的属性和方法 也可以继承原型链上的属性和方法。(Web.prototype=new Person();)

    但是原型链继承也有缺点:

    function Person(name,age){
      this.name = name;//属性
      this.age = age;
      this.run=function(){//实例方法
        alert(this.name + '在运动');
      }
    }
    //原型链上面的属性会被多个实例共享 构造函数不会
    Person.prototype.sex = '男';
    Person.prototype.work = function(){
      alert(this.name + '在工作');
    }
    
    function Web(name,age){
      
    }
    Web.prototype=new Person();//原型链实现继承
    var w = new Web('赵四',20);//实例化子类的时候没发给父类传参
    // w.run(); 
    
    w.work();//undefined在工作

      注意:w.work();//undefined在工作 ;实例化子类的时候没发给父类传参,这个是原型链继承的问题。

    原型链+构造函数继承的方式可避免以上的问题:

    function Person(name,age){
      this.name = name;//属性
      this.age = age;
      this.run=function(){//实例方法
        alert(this.name + '在运动');
      }
    }
    //原型链上面的属性会被多个实例共享 构造函数不会
    Person.prototype.sex = '男';
    Person.prototype.work = function(){
      alert(this.name + '在工作');
    }
    function Web(name,age){
      Person.call(this,name,age);//对象冒充继承 可以继承构造函数里面的属性和方法,实例化子类传参。
    }
    Web.prototype=Person.prototype;//原型链实现继承
    var w = new Web('赵四',20);//实例化子类的时候没发给父类传参
    w.run(); //赵四在运动
    w.work();//赵四在工作
    
    var w1 = new Web('王五',22);
    w1.run(); //王五在运动
    w1.work();//王五在工作
    

      

  • 相关阅读:
    uni-app开发经验分享四: 实现文字复制到选择器中
    uni-app开发经验分享三: Vuex实现登录和用户信息留存
    uni-app 开发随笔(踩坑记录)
    uni-app开发经验分享二: uni-app生命周期记录
    uni-app开发经验分享一: 多页面传值的三种解决方法
    JS复习笔记一:冒泡排序和二叉树列
    jQ实现图片无缝轮播
    canvas星空背景特效+CSS旋转相册学习
    CSS响应式布局学习笔记(多种方法解决响应式问题)
    LeetCode 76. 最小覆盖子串
  • 原文地址:https://www.cnblogs.com/wenshaochang123/p/13408061.html
Copyright © 2011-2022 走看看