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功能代码集锦
May 04 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
Jun 23 Javascript
关于JS中的方法是否加括号的问题
Jul 27 Javascript
JavaScript常用正则函数用法示例
Jan 23 Javascript
通过命令行生成vue项目框架的方法
Jul 12 Javascript
浅谈原型对象的常用开发模式
Jul 22 Javascript
react在安卓中输入框被手机键盘遮挡问题的解决方法
Sep 03 Javascript
详解VSCode配置启动Vue项目
May 14 Javascript
Koa从零搭建到Api实现项目的搭建方法
Jul 30 Javascript
vue element 中的table动态渲染实现(动态表头)
Nov 21 Javascript
基于redis的小程序登录实现方法流程分析
May 25 Javascript
Vue记住滚动条和实现下拉加载的完美方法
Jul 31 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
调整优化您的LAMP应用程序的5种简单方法
2011/06/26 PHP
PHP FATAL ERROR: CALL TO UNDEFINED FUNCTION BCMUL()解决办法
2014/05/04 PHP
[原创]解决wincache不支持64位PHP5.5/5.6的问题(提供64位wincache下载)
2016/06/22 PHP
PHP PDOStatement::columnCount讲解
2019/01/30 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
javascript实现文本域写入字符时限定字数
2014/02/12 Javascript
用于deeplink的js方法(判断手机是否安装app)
2014/04/02 Javascript
JavaScript对象学习小结
2015/09/02 Javascript
javascript中tostring()和valueof()的用法及两者的区别
2015/11/16 Javascript
JavaScript事件类型中UI事件详解
2016/01/14 Javascript
javaScript语法总结
2016/11/25 Javascript
nodejs入门教程四:URL相关模块用法分析
2017/04/24 NodeJs
vue-cli配置文件——config篇
2018/01/04 Javascript
JQuery判断radio单选框是否选中并获取值的方法
2019/01/17 jQuery
react-intl实现React国际化多语言的方法
2020/09/27 Javascript
js仿淘宝放大镜效果
2020/12/28 Javascript
[02:40]DOTA2超级联赛专访430 从小就爱玩对抗性游戏
2013/06/18 DOTA
使用python将mysql数据库的数据转换为json数据的方法
2019/07/01 Python
tensorflow mnist 数据加载实现并画图效果
2020/02/05 Python
Python单例模式的四种创建方式实例解析
2020/03/04 Python
CSS3 flex布局之快速实现BorderLayout布局
2015/12/03 HTML / CSS
俄罗斯购买自行车网站:Vamvelosiped
2021/01/29 全球购物
山海经纬软件测试笔试题和面试题
2013/04/02 面试题
日期和时间问题
2015/01/04 面试题
拓展训练激励口号
2014/06/17 职场文书
十佳好少年事迹材料
2014/08/21 职场文书
意外伤害赔偿协议书范文
2014/09/23 职场文书
公司离职证明标准范本
2014/10/05 职场文书
2015年人力资源工作总结
2015/04/08 职场文书
关于拾金不昧的感谢信(五篇)
2019/10/18 职场文书
JS + HTML 罗盘式时钟的实现
2021/05/21 Javascript
python单元测试之pytest的使用
2021/06/07 Python
Java实现聊天机器人完善版
2021/07/04 Java/Android
Django实现WebSocket在线聊天室功能(channels库)
2021/09/25 Python
Nginx stream 配置代理(Nginx TCP/UDP 负载均衡)
2021/11/17 Servers
「月刊Action」2022年5月号封面公开
2022/03/21 日漫