JS--创建对象

Posted 可口可乐嗨

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS--创建对象相关的知识,希望对你有一定的参考价值。

创建对象的几种方式

 

(1)对象字面量

1 var person = {
2     name: "tom",
3     age: 20,
4     sayName: function () {
5         console.log(this.name);
6     }
7 }

 

(2)Object构造函数

1 var person = new Object ();
2 person.name = "tom";
3 person.age = 20;
4 person.sayName = function () {
5     console.log(this.name);
6 }

 

描述: Object构造函数和对象字面量常用于创建单个对象,其中对象字面量更为常用(V

缺点:当创建多个相似对象时,会产生大量重复的代码  (V

 

(3)工厂模式

1 var createPerson (name, age) {
2     var o = new Object ();
3     o.name = "tom";
4     o.age = 20;
5     o.sayName = function () {
6          console.log(this.name);
7     }
8     return o;
9 }

 

描述:工厂模式虽然解决了创建多个相似对象的问题,但是没有解决对象识别的问题(V

缺点:没有解决对象识别问题,即无法知道一个对象的类型  (V

 

(4)构造函数模式

1 function Person (name, age) {
2     this.name = name;
3     this.age = age;
4     this.sayName = function () {
5         console.log(this.name);
6     }
7 }    

 

描述:通过自定义构造函数创建对象意味着它的实例对象是一种特定的类型,这正是构造函数模式胜过工厂模式的地方;(V

   创建对象的同时通过向构造函数传递参数初始化对象参数。(V 

缺点:若构造函数中有方法的属性,那么每创建一个实例这个方法就有创建一遍,创建多个完成相同功能的函数是没有必要的;(V

   有this对象,无需在执行代码前就把函数绑定到特定对象上;(V

   若把函数定义到函数外部,那么全局作用域中的函数只能供特定的对象调用,若定义多个全局函数,这个自定义类型就毫无封装性可言。(V

 

(5)原型模式

1 function Person () {}
2 
3 Person.prototype.name = "tom";
4 Person.prototype.age = 20;
5 Person.friends = ["lily", "marton"];
6 Person.prototype.sayName = function () { 7 console.log(this.name); 8 }
9
10 var person1 = new Person ("tom", 20);
11 var person2 = new Person ("zhangsan", 20)
12
13 person1.friends.push("helen");
14 console.log(person1.friends); //"lily", "marton", "helen"
15 console.log(person2.friends); //"lily", "marton", "helen"
16 console.log(person1.friends === person2.friends); //true

 

描述:实例对象一般都要有属于自己的全部属性,这导致了我们并不会单独使用原型模式。

缺点:省略了为构造函数传递初始化参数这一步骤;所有的实例对象在默认情况下取得相同的属性值;(V

   当通过实例对象修改原型中的属性值时,所有实例的原型中的属性都会改变,当这个属性值为引用类型时,会特别糟糕。(V

 

(6)构造函数与原型组合模式

 1 function Person (name, age) {
 2     this.name = name;
 3     this.age = age;
 4     this.friends = ["lily", "marton"];
 5 }
 6 Person.prototype = {
 7     constructor: Person,
 8     sayName: function () {
 9        console.log(this.name);
10     }  
11 }
12
13 var person1 = new Person ("tom", 20);
14 var person2 = new Person ("tom", 20)
15
16 person1.friends.push("helen");
17 console.log(person1.friends); //"lily", "marton", "helen"
18 console.log(person2.friends); //"lily", "marton"
19 console.log(person1.sayName === person.sayName); //true

 

描述:通过构造函数模式定义实例对象的属性,通过原型模式定义实例对象的共享属性。(这是目前创建对象使用最广泛的一种方法)(V

优点:每个实例对象都会有自己的一份实例属性的副本又同时共享着对方法的引用,最大限度的节省了内存。(V























以上是关于JS--创建对象的主要内容,如果未能解决你的问题,请参考以下文章

js代码片段

VSCode自定义代码片段12——JavaScript的Promise对象

VSCode自定义代码片段12——JavaScript的Promise对象

AJAX相关JS代码片段和部分浏览器模型

Android 逆向使用 Python 解析 ELF 文件 ( Capstone 反汇编 ELF 文件中的机器码数据 | 创建反汇编解析器实例对象 | 设置汇编解析器显示细节 )(代码片段

有没有办法使用相同的布局动态创建片段并向它们显示数据?