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 相关文章推荐
如何让页面在打开时自动刷新一次让图片全部显示
Dec 17 Javascript
javascript 弹出的窗口返回值给父窗口具体实现
Nov 23 Javascript
jquery禁用右键单击功能屏蔽F5刷新
Mar 17 Javascript
jQuery UI插件实现百度提词器效果
Nov 21 Javascript
javascript实现秒表计时器的制作方法
Feb 16 Javascript
完美实现js拖拽效果 return false用法详解
Jul 28 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
Nov 21 Javascript
三分钟学会用ES7中的Async/Await进行异步编程
Jun 14 Javascript
详解Vue SPA项目优化小记
Jul 03 Javascript
Vue.js轮播图走马灯代码实例(全)
May 08 Javascript
微信小程序利用for循环解决内容变更问题
Mar 05 Javascript
vue实例的选项总结
Jun 09 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
php为什么选mysql作为数据库? Mysql 创建用户方法
2007/07/02 PHP
PHP程序漏洞产生的原因分析与防范方法说明
2014/03/06 PHP
ThinkPHP CURD方法之field方法详解
2014/06/18 PHP
php实现递归抓取网页类实例
2015/04/03 PHP
PHP自定义函数实现格式化秒的方法
2016/09/14 PHP
一个可以显示阴历的JS代码
2007/03/05 Javascript
Javascript的匿名函数小结
2009/12/31 Javascript
用js脚本控制asp.net下treeview的NodeCheck的实现代码
2010/03/02 Javascript
javascript中将Object转换为String函数代码 (json str)
2012/04/29 Javascript
公共js在页面底部加载的注意事项介绍
2013/07/18 Javascript
js转化毫秒为时间格式代码
2014/04/10 Javascript
javascript 构造函数方式定义对象
2015/01/02 Javascript
详解JavaScript for循环中发送AJAX请求问题
2020/06/23 Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
2016/09/23 Javascript
canvas知识总结
2017/01/25 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
2017/03/30 Javascript
Vue中render函数的使用方法
2018/01/31 Javascript
微信小程序时间标签和时间范围的联动效果
2019/02/15 Javascript
Vue开发之封装分页组件与使用示例
2019/04/25 Javascript
Vue数据绑定简析小结
2019/05/07 Javascript
vue router动态路由设置参数可选问题
2019/08/21 Javascript
vue实现列表滚动的过渡动画
2020/06/29 Javascript
Element PageHeader页头的使用方法
2020/07/26 Javascript
Vant picker 多级联动操作
2020/11/02 Javascript
python实现的解析crontab配置文件代码
2014/06/30 Python
Python使用matplotlib的pie函数绘制饼状图功能示例
2018/01/08 Python
Python入门必须知道的11个知识点
2018/03/21 Python
python学习入门细节知识点
2018/03/29 Python
python中join()方法介绍
2018/10/11 Python
在PyCharm中安装PaddlePaddle的方法
2021/02/05 Python
CSS 说明横向进度条最后显示文字的实现代码
2020/11/10 HTML / CSS
PatPat香港:婴童服饰和亲子全家装在线购物
2020/09/27 全球购物
红头文件任命书范本
2014/06/05 职场文书
区政府领导班子个人对照检查材料
2014/09/25 职场文书
导游词之麻姑仙境
2019/11/18 职场文书
nginx实现多geoserver服务的负载均衡
2022/05/15 Servers