ES5_对象 与 继承_晚秋_前端开发者

1. 对象的定义

  //定义对象
  function User(){

        //在构造方法中定义属性
        this.name = '张三';
        this.age = 12;

        //在构造方法中定义方法:
        this.run = function(){
            alert(this.name + '在跑步')
        }
    }

    //原型链中定义属性
    User.prototype.sex = '男';

    //原型链中定义方法
    User.prototype.work = function(){
        alert(this.name + '在工作')
    }

    // 静态方法的声明
    User.getInfo =  function () {
        alert('我是静态方法')
    }

    //对象的使用: 实例化对象
    var user = new User('张三',  3);

    //属性的调用
    alert('姓名:'+ user.name + '; 性别:' + user.sex); // 弹出:  姓名:张三; 性别:男

    //给对象属性重新赋值
    user.name = '李四';
    user.sex = '女';

    //方法的调用
    user.run(); // 弹出:李四在跑步
    user.work(); // 弹出:李四在工作

    //静态方法的调用
    User.getInfo(); // 弹出:  我是静态方法
  //定义对象
  function User(){

        //在构造方法中定义属性
        this.name = '张三';
        this.age = 12;

        //在构造方法中定义方法:
        this.run = function(){
            alert(this.name + '在跑步')
        }
    }

    //原型链中定义属性
    User.prototype.sex = '男';

    //原型链中定义方法
    User.prototype.work = function(){
        alert(this.name + '在工作')
    }

    // 静态方法的声明
    User.getInfo =  function () {
        alert('我是静态方法')
    }

    //对象的使用: 实例化对象
    var user = new User('张三',  3);

    //属性的调用
    alert('姓名:'+ user.name + '; 性别:' + user.sex); // 弹出:  姓名:张三; 性别:男

    //给对象属性重新赋值
    user.name = '李四';
    user.sex = '女';

    //方法的调用
    user.run(); // 弹出:李四在跑步
    user.work(); // 弹出:李四在工作

    //静态方法的调用
    User.getInfo(); // 弹出:  我是静态方法

  //定义对象function User(){

//在构造方法中定义属性this;
this;

//在构造方法中定义方法:thisfunction(){
alert(
this)
}
}

//原型链中定义属性;

//原型链中定义方法function(){
alert(
this)
}

// 静态方法的声明function () {
alert(
)
}

//对象的使用: 实例化对象varnew);

//属性的调用// 弹出: 姓名:张三; 性别:男//给对象属性重新赋值;
user.sex
;

//方法的调用// 弹出:李四在跑步// 弹出:李四在工作//静态方法的调用// 弹出: 我是静态方法

注意: 原型链中声明属性将会多个实例共享,而构造函数不会

注意: 原型链中声明属性将会多个实例共享,而构造函数不会

 

对象的继承

1. 对象的继承 之 对象冒充继承

 function User(){
        this.name = '张三';
        //在构造方法中定义方法:
        this.run = function(){
            alert(this.name + '在跑步')
        }
    }

    //原型链中定义属性
    User.prototype.sex = '男';

    //原型链中定义方法
    User.prototype.work = function(){
        alert(this.name + '在工作')
    }

    //对象中的继承一: 对象冒充继承
    function Student(){
        
        //Student 继承 User对象,此方法叫: 对象冒充继承
        User.call(this);
    }

    var student = new Student();
    student.run(); // 弹出:张三在跑步
    student.work(); //报错,原因是:  对象冒充继承的方法只继承对象的构造函数的属性和方法
 function User(){
        this.name = '张三';
        //在构造方法中定义方法:
        this.run = function(){
            alert(this.name + '在跑步')
        }
    }

    //原型链中定义属性
    User.prototype.sex = '男';

    //原型链中定义方法
    User.prototype.work = function(){
        alert(this.name + '在工作')
    }

    //对象中的继承一: 对象冒充继承
    function Student(){
        
        //Student 继承 User对象,此方法叫: 对象冒充继承
        User.call(this);
    }

    var student = new Student();
    student.run(); // 弹出:张三在跑步
    student.work(); //报错,原因是:  对象冒充继承的方法只继承对象的构造函数的属性和方法

function User(){
this;
//在构造方法中定义方法:thisfunction(){
alert(
this)
}
}

//原型链中定义属性;

//原型链中定义方法function(){
alert(
this)
}

//对象中的继承一: 对象冒充继承function Student(){

//Student 继承 User对象,此方法叫: 对象冒充继承this);
}

varnew Student();
student.run();
// 弹出:张三在跑步//报错,原因是: 对象冒充继承的方法只继承对象的构造函数的属性和方法

注意: 对象冒充继承的方法 只能 继承对象的构造函数的属性和方法,不能 继承原型链中的函数和方法

注意: 对象冒充继承的方法 只能只能只能继承对象的构造函数的属性和方法,不能 继承原型链中的函数和方法构造函数构造函数不能 不能 原型链中原型链中

 

2. 对象的继承 之 原型链继承

 function User(){
        this.name = '张三';
        //在构造方法中定义方法:
        this.run = function(){
            alert(this.name + '在跑步')
        }
    }

    //原型链中定义属性
    User.prototype.sex = '男';

    //原型链中定义方法
    User.prototype.work = function(){
        alert(this.name + '在工作')
    }

    //对象中的继承一: 原型链继承实现继承
    function Student(){
    }
    Student.prototype = new User();

    var student = new Student();
    student.run(); // 弹出:张三在跑步
    student.work(); // 弹出:张三在工作
 function User(){
        this.name = '张三';
        //在构造方法中定义方法:
        this.run = function(){
            alert(this.name + '在跑步')
        }
    }

    //原型链中定义属性
    User.prototype.sex = '男';

    //原型链中定义方法
    User.prototype.work = function(){
        alert(this.name + '在工作')
    }

    //对象中的继承一: 原型链继承实现继承
    function Student(){
    }
    Student.prototype = new User();

    var student = new Student();
    student.run(); // 弹出:张三在跑步
    student.work(); // 弹出:张三在工作

function User(){
this;
//在构造方法中定义方法:thisfunction(){
alert(
this)
}
}

//原型链中定义属性;

//原型链中定义方法function(){
alert(
this)
}

//对象中的继承一: 原型链继承实现继承function Student(){
}
Student.prototype
new User();

varnew Student();
student.run();
// 弹出:张三在跑步// 弹出:张三在工作

注意:原型链继承的方法 可以 继承对象的构造函数的属性和方法,也可以 继承原型链中的函数和方法

注意:原型链继承的方法 可以 继承对象的构造函数的属性和方法,也可以 继承原型链中的函数和方法可以 可以 也可以 也可以 

  function User(name){
        this.name = name;
        //在构造方法中定义方法:
        this.run = function(){
            alert(this.name + '在跑步')
        }
    }

    //原型链中定义属性
    User.prototype.sex = '男';

    //原型链中定义方法
    User.prototype.work = function(){
        alert(this.name + '在工作')
    }

    //带参数对象的实例化方法: 
    var user1 = new User('张三');
    user1.run(); // 弹出: 张三在跑步
    user1.work(); // 弹出:张三在工作


    //对象中的继承一: 原型链继承实现继承
    function Student(name){
    }
    Student.prototype = new User();

    var student = new Student('李四');
    student.run(); // 弹出: undefined在跑步
    student.work(); // 弹出:undefined在工作
  function User(name){
        this.name = name;
        //在构造方法中定义方法:
        this.run = function(){
            alert(this.name + '在跑步')
        }
    }

    //原型链中定义属性
    User.prototype.sex = '男';

    //原型链中定义方法
    User.prototype.work = function(){
        alert(this.name + '在工作')
    }

    //带参数对象的实例化方法: 
    var user1 = new User('张三');
    user1.run(); // 弹出: 张三在跑步
    user1.work(); // 弹出:张三在工作


    //对象中的继承一: 原型链继承实现继承
    function Student(name){
    }
    Student.prototype = new User();

    var student = new Student('李四');
    student.run(); // 弹出: undefined在跑步
    student.work(); // 弹出:undefined在工作

  function User(name){
this name;
//在构造方法中定义方法:thisfunction(){
alert(
this)
}
}

//原型链中定义属性;

//原型链中定义方法function(){
alert(
this)
}

//带参数对象的实例化方法: varnew);
user1.run();
// 弹出: 张三在跑步// 弹出:张三在工作//对象中的继承一: 原型链继承实现继承function Student(name){
}
Student.prototype
new User();

varnew);
student.run();
// 弹出: undefined在跑步// 弹出:undefined在工作

 

注意:原型链继承有个缺点就是 在实例化子类时,无法 给父类传参,如上代码,子类调用父类的方法时, 弹出传参属性为 undefined

注意:原型链继承有个缺点就是 在实例化子类时,无法 给父类传参,如上代码,子类调用父类的方法时, 弹出传参属性为 undefined无法 无法 

为了解决此缺点,则可以使用  冒充对象继承 + 原型链继承的组合模式

 

3.  冒充对象继承 + 原型链继承的组合模式

function User(name){
        this.name = name;
        //在构造方法中定义方法:
        this.run = function(){
            alert(this.name + '在跑步')
        }
    }

    //原型链中定义属性
    User.prototype.sex = '男';

    //原型链中定义方法
    User.prototype.work = function(){
        alert(this.name + '在工作')
    }


    //对象中的继承一: 原型链继承实现继承
    function Student(name){

        //冒充对象继承时,可以给父类传参
        User.call(this, name);
    }
   
    //原型链继承父类
    //Student.prototype = new User();

    //因冒充对象继承时,已经继承了父类的构造函数中的属性和方法,因此在原型链继承中也可只继承父类的原型链的属性和方法,即
    Student.prototype = User.prototype;
    
    
    var student = new Student('李四');
    student.run(); // 弹出: 李四在跑步
    student.work(); // 弹出:李四在工作
function User(name){
        this.name = name;
        //在构造方法中定义方法:
        this.run = function(){
            alert(this.name + '在跑步')
        }
    }

    //原型链中定义属性
    User.prototype.sex = '男';

    //原型链中定义方法
    User.prototype.work = function(){
        alert(this.name + '在工作')
    }


    //对象中的继承一: 原型链继承实现继承
    function Student(name){

        //冒充对象继承时,可以给父类传参
        User.call(this, name);
    }
   
    //原型链继承父类
    //Student.prototype = new User();

    //因冒充对象继承时,已经继承了父类的构造函数中的属性和方法,因此在原型链继承中也可只继承父类的原型链的属性和方法,即
    Student.prototype = User.prototype;
    
    
    var student = new Student('李四');
    student.run(); // 弹出: 李四在跑步
    student.work(); // 弹出:李四在工作

function User(name){
this name;
//在构造方法中定义方法:thisfunction(){
alert(
this)
}
}

//原型链中定义属性;

//原型链中定义方法function(){
alert(
this)
}

//对象中的继承一: 原型链继承实现继承function Student(name){

//冒充对象继承时,可以给父类传参this, name);
}

//原型链继承父类//Student.prototype = new User();//因冒充对象继承时,已经继承了父类的构造函数中的属性和方法,因此在原型链继承中也可只继承父类的原型链的属性和方法,即 User.prototype;

varnew);
student.run();
// 弹出: 李四在跑步// 弹出:李四在工作

 

» 本文来自:前端开发者 » 《ES5_对象 与 继承_晚秋_前端开发者》
» 本文链接地址:https://www.rokub.com/73784.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!