javascript面向对象创建对象的方式小结


Posted in Javascript onJuly 29, 2019

本文实例讲述了javascript面向对象创建对象的方式。分享给大家供大家参考,具体如下:

方式一:通过内置Object对象的方式创建 然后通过点语法,动态给对象创建属性,方法

var o1 = new Object();
o1.name = 'Tom';
o1.sing = function() {
 console.log('I am singing');
}

方式二:通过字面量json形式创建对象

var o2 = {
 "name":"jackson",
 "age":"10",
 "say":function(){
  console.log("say hi");
 };
};

方式三:通过构造函数创建

var o3 = function() {
 this.name = "Lucy",
 this.age = "10",
 this.say = function() {
  console.log("say hello");
 }
}

方式四:通过原型创建

var o4 = function() {}
o4.prototype = {
 "name":"Taylor",
 "age":10,
 "say":function(){
  console.log("say h1");
 }
}

方式五:通过原型和构造函数混合的形式创建(推荐使用这种,原因:尽量将方法定义为原型方法,原型方法避免了每次调用构造函数时对属性或方法的构造,节省空间,创建对象快)

var o5 = function() {
 this.name = 'James';
 this.age = 10;
}
o5.prototype = {
 "say":function() {
   console.log("say hi");
 }
}

方式六:拷贝模式创建对象

// 先要有一个拷贝模块
function extend(target,source){
 for(var k in source){
  target[k] = source[k];
 }
 return target;
};
var o6 = {
 "name":"o6",
 "age":10
}
var o7 = {
 "say":function() {
  console.log('say hi');
 }
}
// o6拷贝o7的方法,然后构建成一个新的对象
var o8 = extend(o6,o7);
o8.say(); // say hi

方式七:通过第三方库来创建对象

有 base2.js  和 simplejavascriptinheritance.js 来实现, 网上有资料。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js 利用className得到对象的实现代码
Nov 15 Javascript
解析JSON对象与字符串之间的相互转换
Dec 18 Javascript
深入理解JavaScript系列(21):S.O.L.I.D五大原则之接口隔离原则ISP详解
Mar 05 Javascript
jquery实现简单的无缝滚动
Apr 15 Javascript
javascript实现youku的视频代码自适应宽度
May 25 Javascript
深入学习jQuery Validate表单验证
Jan 18 Javascript
javascript显示上周、上个月日期的处理方法
Feb 03 Javascript
JavaScript 函数模式详解及示例
Sep 07 Javascript
分类解析jQuery选择器
Nov 23 Javascript
Angularjs中三种数据的绑定策略(“@”,“=”,“&”)
Dec 23 Javascript
openlayers 3实现车辆轨迹回放
Sep 24 Javascript
vantUI 获得piker选中值的自定义ID操作
Nov 04 Javascript
jquery.pager.js实现分页效果
Jul 29 #jQuery
vue-router跳转时打开新页面的两种方法
Jul 29 #Javascript
JS实现移动端点击按钮复制文本内容
Jul 28 #Javascript
微信小程序文字显示换行问题
Jul 28 #Javascript
vue router 跳转时打开新页面的示例方法
Jul 28 #Javascript
pageGroup.js实现分页功能
Jul 27 #Javascript
laypage+SpringMVC实现后端分页
Jul 27 #Javascript
You might like
Linux下源码包安装Swoole及基本使用操作图文详解
2019/04/02 PHP
php模式设计之观察者模式应用实例分析
2019/09/25 PHP
关于PHP5.6+版本“No input file specified”问题的解决
2019/12/11 PHP
JS实现打开本地文件或文件夹
2021/03/09 Javascript
js使用cookie记录用户名的方法
2015/11/26 Javascript
jquery操作select元素和option的实例代码
2016/02/03 Javascript
EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容
2016/08/24 Javascript
JavaScript实现向select下拉框中添加和删除元素的方法
2017/03/07 Javascript
详解vue前后台数据交互vue-resource文档
2017/07/19 Javascript
mui开发中获取单选按钮、复选框的值(实例讲解)
2017/07/24 Javascript
详谈JS中数组的迭代方法和归并方法
2017/08/11 Javascript
JS实现简单表格排序操作示例
2017/10/07 Javascript
用Fundebug插件记录网络请求异常的方法
2019/02/21 Javascript
Node爬取大批量文件的方法示例
2019/06/28 Javascript
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
2020/07/20 Javascript
[50:45]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第一场
2018/04/10 DOTA
[46:55]完美世界DOTA2联赛决赛 FTD vs Phoenix 第三场 11.08
2020/11/11 DOTA
Python标准库os.path包、glob包使用实例
2014/11/25 Python
Python常见加密模块用法分析【MD5,sha,crypt模块】
2017/05/24 Python
[原创]教女朋友学Python3(二)简单的输入输出及内置函数查看
2017/11/30 Python
python mysql断开重连的实现方法
2019/07/26 Python
详解CSS3新增的背景属性
2019/12/25 HTML / CSS
html5中JavaScript removeChild 删除所有节点
2014/05/16 HTML / CSS
享誉全球的多元化时尚精品购物平台:Farfetch发发奇(支持中文)
2017/08/08 全球购物
90后毕业生的求职信范文
2013/09/21 职场文书
口头翻译求职人自荐信
2013/12/07 职场文书
美术指导助理求职信
2014/04/20 职场文书
协会周年庆活动方案
2014/08/26 职场文书
个人反四风对照检查材料思想汇报
2014/09/23 职场文书
2014小学一年级班主任工作总结
2014/12/05 职场文书
辞职信范文大全
2015/03/02 职场文书
2015年教学工作总结
2015/04/02 职场文书
未婚证明范本
2015/06/15 职场文书
2016年社会主义核心价值观心得体会
2016/01/21 职场文书
使用Redis实现点赞取消点赞的详细代码
2022/03/20 Redis
JavaScript架构搭建前端监控如何采集异常数据
2022/06/25 Javascript