前端知识@IT·互联网WEB前端程序开发

JavaScript——实现对象继承的五种方式(对象冒充 cal

2017-02-08  本文已影响144人  扒块腹肌
  • 首先明确this在javascript当中的指的是调用者,在java中指的是当前对象,这两者有本质区别的

1. 对象冒充

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

        function Child(name, age)
        {
            //3行关键代码 此三行用于获取父类的成员及方法
            //用子类的this去冒充父类的this,实现继承
            //父类Parent中的this.name、sayHello,分别成为了子类的成员、子类的方法
            this.method = Parent;
            //接收子类的参数 传给父类
            this.method(name);
            //删除父类
            delete this.method;
            
            //此后的this均指子类
            this.age = age;
            this.sayWorld = function()
            {
                alert(age);
            }
        }
        var parent = new Parent("张三");
        var child = new Child("李四", 20);

        parent.sayHello();
        child.sayHello();
        child.sayWorld();

2. call 方法方式

//call 方法是 Function 对象中的方法,因此我们定义的每个函数都拥有该方法。
//可以通过函数名来调用call 方法,call 方法的第一个参数会 被传递给函数中的this,
//从第 2 个参数开始,逐一赋值给函数中的参数

//call方法的使用
function test(str, str2)
{
    alert(this.name + ", " + str + ", " + str2);
}

var object = new Object();
object.name = "zhangsan";

//test.call相当于调用了test函数
//将object赋给了this
test.call(object, "JavaScript", "hello"); 

//call方法实现继承
 function Parent(name)
    {
        this.name = name;
        this.sayHello = function()
        {
            alert(name);
        }
    }

    function Child(name, age)
    {
//子类的this传给父类
        Parent.call(this, name);
        this.age = age;
        this.sayWorld = function()
        {
            alert(age);
        }
    }

    var parent = new Parent("张三");
    var child = new Child("李四", 20);

    parent.sayHello();
    child.sayHello();
    child.sayWorld();

3. apply方法方式

//call 和 apply 都是为了改变某个函数运行时的 context (上下文)而存在的,
//是为了改变函数体内部 this 的指向,劫持其他对象的方法
//call 和 apply二者的作用完全一样,只是接受参数的方式不太一样,apply第二个参数是一个参数列表
        function Parent(name)
        {
            this.name = name;
            this.sayHello = function()
            {
                alert(name);
            }
        }

        function Child(name, age)
        {
            Parent.apply(this, new Array(name));

            this.age = age;

            this.sayWorld = function()
            {
                alert(age);
            }
        }

        var parent = new Parent("张三");
        var child = new Child("李四", 30);

        parent.sayHello();
        child.sayHello();
        child.sayWorld();

4. 原型链方式(prototype chain )

//无法给构造函数传参数
    function Parent()
    {

    }

    Parent.prototype.name = "张三";
    Parent.prototype.sayHello = function()
    {
        alert(this.name);
    }

    function Child()
    {

    }
    //子类的原型引用指向父类
    Child.prototype = new Parent();
    Child.prototype.age = 20;

    Child.prototype.sayWorld = function()
    {
        alert(this.age);
    }
        var child = new Child();
        child.sayHello();
        child.sayWorld();

5. 混合方式(克服了原型琏的弊端)

//将对象方法拿到对象的外面定义,封装对象属性
       function Parent(name)
       {
           this.name = name;
       }
        Parent.prototype.sayHello = function()
        {
            alert(this.name);
        }

        function Child(name, age)
        {//子类的this传给parent
            Parent.call(this, name);
            this.age = age;
        }
        //子类的原型引用指向父类对象
        Child.prototype = new Parent();
        Child.prototype.sayWorld = function()
        {
            alert(this.age);
        }

        var child = new Child("李四", 30);
        child.sayHello();
        child.sayWorld();

上一篇下一篇

猜你喜欢

热点阅读