美文网首页
JS创建对象

JS创建对象

作者: 李丹linda | 来源:发表于2018-06-24 17:50 被阅读0次

一、基本方法

1.字面量:var o = {};

2.构造函数:var o = new Object();

二、工厂模式

1.核心:用函数封装,以特定接口创建对象的细节。

2.

    <script type="text/javascript">
        function CreatePerson(name,age,job){
            var o = new Object();
            o.name = name;
            o.age = age;
            o.job = job;
            o.sayName = function(){
                alert(this.name);
            };
            return o;
        }
        var person1 = CreatePerson("Tom","24","Teacher");       
        var person2 = CreatePerson("kity","26","Software Engineer");
    </script>

3.缺点:

(1)无法识别对象的类型。

三、构造函数模式

1.核心:写一个构造函数,并通过new方式来创建对象,可以带参。

2.

    <script type="text/javascript">
        function Person(name,age,job){
            this.name = name;
            this.age = age;
            this.job = job;
            this.sayName = function(){
                alert(this.name);
            }
        }

        var person1 = new Person("Tom","24","Teacher");
        var person2 = new Person("kity","26","Software Engineer");      
    </script>

3.与工厂模式相比

(1)没有显式的创建对象;
(2)直接将属性和方法赋值给了this对象;
(3)没有return语句。

4.用new操作符来创建新实例,4个步骤:

(1)创建一个新对象;
(2)将构造函数的作用域赋给新对象(即this指向新对象);
(3)执行构造函数中的代码;
(4)返回新对象。

5.缺点:

(1)每个实例都创建一个方法;
(2)不同实例上的同名函数是不相等的。

        console.log(person1.sayName === person2.sayName)            //false 

四、原型模式

1.核心:我们创建的每一个函数都有一个prototype属性,这个属性是一个指针,指向一个对象,

而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。

2.

    <script type="text/javascript">
        function Person(){
        }
        Person.prototype.name = "Tom";
        Person.prototype.age = 24;
        Person.prototype.job = "Teacher";
        Person.prototype.sayName = function(){
            alert(this.name);
        }

        var person1 = new Person();
        person1.sayName();                  //Tom
        var person2 = new Person();
        person2.sayName();                  //Tom

        alert(person1.sayName === person2.sayName);     //true
    </script>

3.优点:让所有对象共享原型的属性和方法。

4.缺点:

(1)创建函数不能传参,实例在默认情况下取得相同的属性值。
(2)共享引用存在问题;

    <script type="text/javascript">
        function Person(){
        }
        Person.prototype.name = "Tom";
        Person.prototype.age = 24;
        Person.prototype.job = "Teacher";
        Person.prototype.friend = ["kity","John"];
        Person.prototype.sayName = function(){
            alert(this.name);
        }

        var person1 = new Person();
        console.log(person1.friend);                    //Kity,John
        var person2 = new Person();
        console.log(person2.friend);                    //Kity,John

        person1.friend.push("Lyda");
        console.log(person1.friend);                    //Kity,John,lyda
        console.log(person2.friend);                    //Kity,John,lyda

    </script>

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

1.核心:用构造函数模式定义实例的属性,用原型模式定义方法和共享的属性。

2.

    <script type="text/javascript">
        function Person(name,age,job){
            this.name = name;
            this.age = age;
            this.job = job;
            this.friend = ["Kity","John"];
        }
        Person.prototype.sayName = function(){
            alert(this.name);
        }

        var person1 = new Person("Tom","24","Teacher");
        person1.sayName();                  //Tom
        var person2 = new Person("Aimi","26","Software Engineer");
        person2.sayName();                  //Aimi

        alert(person1.sayName === person2.sayName);     //true

        console.log(person1.friend);                    //Kity,John
        console.log(person2.friend);                    //Kity,John

        person1.friend.push("Lyda");
        console.log(person1.friend);                    //Kity,John,lyda
        console.log(person2.friend);                    //Kity,John
        alert(person1.sayName === person2.sayName);     //false
    </script>

六、寄生构造函数模式

1.核心:创建一个函数,该函数的作用仅仅是封装创建对象的代码,然后返回新创建的对象。

2.

    <script type="text/javascript">
        function Person(name,age,job){
            var o = new Object();
            o.name = name;
            o.age = age;
            o.job = job;
            o.sayName = function(){
                alert(this.name);
            };
            return o;
        }
        var person1 = new Person("Tom","24","Teacher"); 
    </script>

3.特点:

除了使用new操作符并把使用的包装函数叫做构造函数之外,各个模式跟工厂模式其实是一模一样的。

相关文章

  • JS对象

    JS 创建对象 批量创建对象

  • 6.JavaScript中

    JS对象创建: JS通过构造函数创建对象: JS内置对象window: 所有的全局变量都是window的属性 所有...

  • JS笔记-006-JS对象-数字-字符串-日期-数组-逻辑

    JS对象 创建 JavaScript 对象 通过 JavaScript,您能够定义并创建自己的对象。 创建新对象有...

  • 面向对象案例:随机方块

    1.创建画布 2.创建工具对象--tools.js 3.创建box盒子对象--box.js 3.1创建构造函数 3...

  • JS创建对象

    一、基本方法 1.字面量:var o = {}; 2.构造函数:var o = new Object(); 二...

  • JS创建对象

    工厂模式 由于在ECMAScript无法创建类,所以用函数的封装以特定接口创建对象 问题:解决了创建多个相似对象的...

  • js 创建对象

    创建对象的几种方法 方法一:new Object() 方法二:{} 方法三:function xx() 为对象中添...

  • js创建对象

    this指针构造器创建 工厂模式 new 出来 prototype变量赋值 :为属性赋值链接

  • js创建对象

    新博客地址:http://gengliming.com 参考《javascript 高级程序设计(第3版)》 1、...

  • JS—创建对象

    创建object实例的方式有两种: 使用new操作符,后面跟object构造函数。 使用对象字面量表示法。 分别复...

网友评论

      本文标题:JS创建对象

      本文链接:https://www.haomeiwen.com/subject/idmjyftx.html