js定义对象的方法和继承的方法_父对象 js、-优快云博客

本文链接：https://blog.youkuaiyun.com/FateHJ/article/details/51088326

本文详细介绍了JavaScript中创建对象的多种方式，包括直接赋值、工厂模式、构造函数、原型方式等，并探讨了如何实现对象之间的继承。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

定义对象的方法

基于已有对象扩充其对象和方法(只适合于临时的生成一个对象)：


    var obj = new Object();
    //两种增加对象属性的方法
    obj.username = "user";
    obj["password"] = 123;
    //增加方法
    obj.show  =function(username,password){
            this.username = username;
            this.password = password;
            alert(this.username+":"+this.password);
    }
    //删除属性
    delete obj.username;

2.开发最为常见的定义对象方式

var obj = {username:"root",password:123};
        alert(obj.username+":"+obj.password);

有方法的：

var obj = {username:"root",password:54,
            show :function(){
                alert(this.username+":"+this.password);
            }
    };

    obj.show();

3.工厂模式(无参)

function createObject(){
            var obj = new Object();

            obj.username = "root";
            obj.password = 123;

            obj.show = function(){
                alert(this.username+":"+this.password);
            };
            return obj;
        }

        var obj1 = createObject();
        obj1.username = "fate";
        var obj2 = createObject();
        obj1.show();
        obj2.show();

4.工厂模式（带参数）

function createObject(username,password)
        {
            var obj = new Object();

            obj.username = username;
            obj.password = password;

            obj.show = function()
            {
                alert(this.username +":"+ this.password);
            };
            return obj;
        }

        var obj = createObject("fate","1234");
        obj.show();

让方法被多个对象共享：

function createObject(username,password)
        {
            var obj = new Object();

            obj.username = username;
            obj.password = password;
            obj.show = show;

            return obj;
        }
        //把方法创建到对象工厂外面，被多对象共享
        var show = function()
        {
            alert(this.username +":"+ this.password);
        };

        var obj1 = createObject("小明","1234");
        var obj2 = createObject("张三","4564");
        obj1.show();
        obj2.show();

5.构造函数方法
无参：


        function Person(){
            //在执行第一行代码前，js引擎会为我们生成一个对象
            this.username = "小明";
            this.password = "1564";

            this.show = function(){
                alert(this.username+":"+this.password);
            }
            //此处隐藏一个return语句，用于把生成的对象返回
        }
        //在这里new一个对象
        var p = new Person();
        p.show();

有参：

    function Person(username,password){
            //在执行第一行代码前，js引擎会为我们生成一个对象
            this.username = username;
            this.password = password;

            this.show = function(){
                alert(this.username+":"+this.password);
            }
            //此处隐藏一个return语句，用于把生成的对象返回
        }
        //在这里new一个对象
        var p = new Person("小红","464641");
        p.show();

6.原型（ prototype）方式


    function Person(){

    }
    //用prototype添加对象的属性和方法
    Person.prototype.username = "张三";
    Person.prototype.password = "1389";

    Person.prototype.show = function(){
        alert(this.username+":"+this.password);
    };
    //new对象
    var person1 =  new Person();
    var person2 = new Person();
    person1.username = "夏天";

    person1.show();
    person2.show();

prototype增加的属性为数组：


    function Person(){

    }
    //用prototype添加对象的属性和方法
    Person.prototype.username = new Array();
    Person.prototype.password = "1389";

    Person.prototype.show = function(){
        alert(this.username+":"+this.password);
    };
    //new对象
    var person1 =  new Person();
    var person2 = new Person();
    person1.username = "夏天";
    person2.username = "林";
    person1.password = "168";

    person1.show();
    person2.show();

缺点：：单纯使用原型方式创建对象，无法给对象传参数，只能通过创建对象后再去改变属性的值
7. 原型+构造函数方式（各个对象之间互不干扰，各个对象共享一个方法）

    function Person(password){
        this.username = new Array();
        this.password = password;
    }

    Person.prototype.show = function(){
        alert(this.username+":"+this.password);
    };

    var p1 = new Person("5644");
    var p2 = new Person("111111");

    p1.username.push("小白");
    p2.username.push("小黑");

    p1.show();
    p2.show();

8.动态原型方式：在构造函数中通过标质量让所有对象共享一个方法，而每个对象拥有自己的属性。

function Person(){
        this.username = "小白";
        this.password = "156";
        //做一个判断标志，让方法只产生一次
        if(typeof Person.flag == "undefined"){//这里只要Person.flag不等于Undefined，其他的值都为true
            Person.prototype.show = function(){
                alert(this.username+":"+this.password);
        };
            Person.flag = true;
        }
    }

        var p1 = new Person();
        var p2 = new Person();
        p1.username = "大白";
        p1.show();
        p2.show();

javacript继承的方法

对象冒充

//父对象
    function Parent(username){
        this.username = username;

        this.show = function(){
            alert(this.username);
        };
    }
    //子对象
    function Child(username,password){
        //下面三行为关键代码
        this.method = Parent;
        this.method(username);
        delete this.method;

        //子类特有的属性和方法
        this.password = password;
        this.showInfo = function(){
            alert(this.password);
        };
    }

    var parent = new Parent("小红");
    var child = new Child("小明","321345");

    parent.show();
    //子类能够调用父类的属性和方法
    child.username ="大白";
    child.show();
    child.showInfo();

2.call的方法方式(父类引用在子类中调用call方法，第一个参数传代表子类的this，后面根据父类参数依次传)

    //父类
        function Parent(username){
            this.username = username;

            this.show = function(){
                alert(this.username);
            };
        }
    //子类
    function Child(username,password){
        //父类对象调用call方法，把代表子类的this传过去
        Parent.call(this, username);

        this.password = password;

        this.showInfo = function(){
            alert(this.password);
        };
    }

    var parent = new Parent("小红");
    var child = new Child("小白","15");

    parent.show();
    //子类继承父类的方法
    child.show();
    child.showInfo();

3.apply方法

//父类
    function Parent(username,age){
        this.username = username;
        this.age = age;

        this.show = function(){
            alert(this.username);
        };
    }
//子类
function Child(username,password,age){//子类的参数要包含父类的所有参数
    //父类对象调用apply方法，把代表子类的this传过去,后面父类对应的所有参数都依次添加到数组中
    Parent.apply(this, new Array(username,age));

    this.password = password;

    this.showInfo = function(){
        alert(this.password);
    };
}

var parent = new Parent("小红");
var child = new Child("小白白","15");

parent.show();
//子类继承父类的方法
child.age = "24";
child.show();
child.showInfo();

4.原型链方式（无法给构造方法传参）

    //父类
    function Parent(){

    }

    Parent.prototype.username = "小白";
    Parent.prototype.show = function(){
        alert(this.username);
    };
    //子类
    function Child(){

    }
    //关键代码，这样子类就拥有了父类用prototype添加的属性和方法，不是prototype添加的子类没有继承
    Child.prototype  = new Parent();

    Child.prototype.password = "484984";
    Child.prototype.showInfo = function(){
        alert(this.password);
    };

    var child = new Child();
    //子类继承了父类的属性和方法
    child.username = "小小";
    child.show();
    child.showInfo();

5.混合模式（推荐使用）

//父类
        function Parent(username){
            this.username = username;
        }
        //给父类添加方法
        Parent.prototype.show = function(){
            alert(this.username);
        };
        //让子类拥有了父类的username
        function Child(username,password){
            Parent.call(this,username);
            this.password = password;
        }
        //让子类拥有了父类用prototype添加的show()方法
        Child.prototype = new Parent();

        Child.prototype.showInfo = function(){
            alert(this.password);
        };

        var child = new Child("小白","748974854");

        child.show();
        child.showInfo();