首页 > js教程 > 正文

几种JS创建对象的方式分享

原创 2018-03-13 18:04:21 0 4
本文主要和大家分享几种JS创建对象的方式,希望能帮助到大家。

1、使用原生构造函数创建特定类型的对象

  var person =new Object();
    person.name="wangwu";
    person.age="20";
    person.sayName=function(){
    alert(this.name);
}

2.用对象字面量

var person = {
    name:"wangwu",
    age:"20",
    sayName: function(){
        alert(this.name);
    }
}

小结:这两种方式都可以用来创建单个对象,但是有明显的缺点,使用同一个接口创建很多对象,会产生大量重复代码。

3.使用工厂模式

function createPerson(name,age){
    var o=new Object();
    o.name=name;
    o.age=age;
    o.sayName=function(){
            alert(this.name);
    };
    return o;
}
var person1=createPerson("wangwu",20);

抽象了创建具体对象的过程,发明一种函数,用函数来封装以特定接口创建对象的细节。

4、构造函数模式

function  Person(name,age){
    this.name=name;
    this.age=age;
    this.sayName=function(){
        alert(this.name);
    };
}
var person1=new Person("wangwu",20);

创建自定义的构造函数,从而定义自定义对象类型的属性和方法。

5、原型模式

function Person(){
}
Person.prototype.name="wangwu";
Person.prototype.age=20;
Person.prototype.sayName=function(){
    alert(this.name);
}
var person1=new Person();
person1.sayName(); //wangwu

我们创建的每个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。原型模式的缺点是省略了为构造函数传递初始化参数这一环节,结果所有实例在默认情况下都取得相同的属性值;原型中所有属性是被很多实例共享的,对于包含引用类型值的属性来说问题就比较突出了。

6、组合使用构造函数模式和原型模式

function Person(name,age){
    this.name=name;
    this.age=age;
    this.friends=["wangwu","zhangsan"];
}
Person.prototype={
    constructor:Person,
    sayName:function(){
        alert(this.name);
    }
}
var person1=new Person("wangwu",20);
var person2=new Person("zhangsan",23);
person1.friends.push("lisi");
alert(person1.friends); //"wangwu,zhangsan,lisi"
alert(person2.friends); //"wangwu,zhangsan"

7、动态原型模式

  function Person(name,age,job){
        //属性
    this.name=name;
    this.age=age;
    this.job=job;
//方法
if(typeof this.sayName!="function"){
    person.prototype.sayName=function(){
            alert(this.name);
    };
}
}
var  friend=new Person("wangwu",20);
friends.sayName();

8、寄生构造函数模式

function Person(name,age){
    var 0=new Object();
    o.name="wangwu";
    o.age=20;
    o.sayName=function(){
        alert(this.name);
    };
    return o;
}
var friend=new Person("wangwu",20);
friend.sayName(); //"wangwu"

9、稳妥构造函数模式

function Person(name,age,job){
    //创建要返回的对象
    var  o=new Object();
    //可以在这里定义私有变量和函数
    //添加方法
    o.sayName=function(){
        alert(name);
    };
//返回对象
return o;
}
var friend=Person("wangwu",20);
friend.sayName();  //"wangwu"

相关推荐:

js创建对象的方法汇总(示例代码)

Js创建对象额几种方式

js创建对象的几种常用方式小结(推荐)_js面向对象

以上就是几种JS创建对象的方式分享的详细内容,更多请关注php中文网其它相关文章!

  • 相关标签:javascript 分享 方式
  • 本文原创发布php中文网 ,转载请注明出处,感谢您的尊重!
  • 相关文章


  • 原生javascript实现分享到朋友圈功能 支持ios和android_javascript技巧
  • jQuery链式调用与show知识浅析_jquery
  • JS实现登录页面记住密码和enter键登录方法推荐_javascript技巧
  • BootstrapTable与KnockoutJS相结合实现增删改查功能【一】_javascript技巧
  • 网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
    独孤九贱(4)_PHP视频教程

    独孤九贱(4)_PHP视频教程

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP中文网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    独孤九贱(5)_ThinkPHP5视频教程

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    独孤九贱(1)_HTML5视频教程

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    ThinkPHP5实战之[教学管理系统]

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    PHP入门视频教程之一周学会PHP

    PHP入门视频教程之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    相关视频教程

  • javascript初级视频教程 javascript初级视频教程
  • jquery 基础视频教程 jquery 基础视频教程
  • javascript三级联动视频教程 javascript三级联动视频教程
  • 独孤九贱(3)_JavaScript视频教程 独孤九贱(3)_JavaScript视频教程
  • 独孤九贱(6)_jQuery视频教程 独孤九贱(6)_jQuery视频教程
  • 相关视频章节