JavaScript对象创建的九种方式
时间:2022-05-03
本文章向大家介绍JavaScript对象创建的九种方式,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1、标准创建对象模式
1 var person = new Object();
2 person.name = "Nicholas";
3 person.age = 29;
4 person.job = "Software Engineer";
5 person.sayName = function(){alert(this.name);};
2、字面量模式
1 var person = {
2 name: "Nicholas",
3 age: 29,
4 job: "Software Engineer",
5 sayName: function(){alert(this.name);}
6 };
3、工厂模式
1 function createPerson(name, age, job){
2 var o = new Object();
3 o.name = name;
4 o.age = age;
5 o.job = job;
6 o.sayName = function(){alert(this.name);};
7 return o;
8 }
9 var person1 = createPerson("Nicholas", 29, "Software Engineer");
10 var person2 = createPerson("Greg", 27, "Doctor");
4、构造函数模式
1 function Person(name, age, job){
2 this.name = name;
3 this.age = age;
4 this.job = job;
5 this.sayName = function(){alert(this.name);};
6 }
7 var person1 = new Person("Nicholas", 29, "Software Engineer");
8 var person2 = new Person("Greg", 27, "Doctor");
5、原型模式
1 function Person(){}
2 Person.prototype.name = "Nicholas";
3 Person.prototype.age = 29;
4 Person.prototype.job = "Software Engineer";
5 Person.prototype.sayName = function(){alert(this.name);};
6 var person1 = new Person();
7 person1.sayName(); //"Nicholas"
8 var person2 = new Person();
9 person2.sayName(); //"Nicholas"
10 alert(person1.sayName == person2.sayName); //true
6、组合构造函数和原型模式
1 function Person(name, age, job){
2 this.name = name;
3 this.age = age;
4 this.job = job;
5 this.friends = ["Shelby", "Court"];
6 }
7 Person.prototype = {
8 constructor : Person,
9 sayName : function(){alert(this.name);}
10 }
11 var person1 = new Person("Nicholas", 29, "Software Engineer");
12 var person2 = new Person("Greg", 27, "Doctor");
13 person1.friends.push("Van");
14 alert(person1.friends); //"Shelby,Count,Van"
15 alert(person2.friends); //"Shelby,Count"
16 alert(person1.friends === person2.friends); //false
17 alert(person1.sayName === person2.sayName); //true
7、动态原型模式(这里只在 sayName()方法不存在的情况下,才会将它添加到原型中。)
1 function Person(name, age, job){
2 this.name = name;
3 this.age = age;
4 this.job = job;
5 if (typeof this.sayName != "function"){
6 Person.prototype.sayName = function(){alert(this.name);};
7 }
8 }
9 var friend = new Person("Nicholas", 29, "Software Engineer");
10 friend.sayName();
8、寄生构造函数模式(除了使用 new 操作符并把使用的包装函数叫做构造函数之外,这个模式跟工厂模式其实是一模一样的。)
1 function Person(name, age, job){
2 var o = new Object();
3 o.name = name;
4 o.age = age;
5 o.job = job;
6 o.sayName = function(){alert(this.name);};
7 return o;
8 }
9 var friend = new Person("Nicholas", 29, "Software Engineer");
10 friend.sayName(); //"Nicholas"
9、稳妥构造函数模式(一是新创建对象的实例方法不引用 this;二是不使用 new 操作符调用构造函数)
function Person(name, age, job){
var o = new Object();
o.sayName = function(){alert(name);};
return o;
}
var friend = Person("Nicholas", 29, "Software Engineer");
friend.sayName(); //"Nicholas"
- CSS3魔法堂:说说Multi-column Layout
- 数据可视化-EChart2.0使用总结2
- rpc框架之 thrift 学习 2 - 基本概念
- rpc框架之avro 学习 1 - hello world
- 探讨Android中的内置浏览器和Chrome
- java并发编程学习: 阻塞队列 使用 及 实现原理
- CSS魔法堂:说说Float那个被埋没的志向
- Netbeans配置Xdebug
- rpc框架: thrift/avro/protobuf 之maven插件生成java类
- WebComponent魔法堂:深究Custom Element 之 从过去看现在
- 数据可视化-EChart2.0使用总结1
- JavaScript事件概览
- gradle项目与maven项目相互转化
- rpc框架之gRPC 学习 - hello world
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android 连接匿名WiFi的示例代码
- Android自定义图文跑马灯效果
- Android自定义View实现可展开、会呼吸的按钮
- Android仿google now效果的呼吸按钮
- Kotlin中双冒号::使用方法
- android实现简单左滑删除控件
- Android几种多渠道打包的步骤详解
- RadioButton实现选择后可取消选择
- Android数字选择器NumberPicker使用详解
- Listvie简单实现购物车功能
- RXjava网络获取图片数据的方法
- VerticalBannerView仿淘宝头条实现垂直轮播广告
- ViewFlipper实现文字轮播效果
- Android自定义ViewFlipper实现滚动效果
- ViewFlipper实现上下翻滚轮播效果