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 相关文章推荐
javscript对象原型的一些看法
Sep 19 Javascript
基于jquery的滑动样例代码
Nov 20 Javascript
编程语言JavaScript简介
Oct 16 Javascript
JavaScript 学习笔记之语句
Jan 14 Javascript
JS实现5秒钟自动封锁div层的方法
Feb 20 Javascript
基于Bootstrap里面的Button dropdown打造自定义select
May 30 Javascript
JS原型链 详解及示例代码
Sep 06 Javascript
通过js修改input、select默认字体颜色
Apr 19 Javascript
JavaScript 链表定义与使用方法示例
Apr 28 Javascript
Vue+Spring Boot简单用户登录(附Demo)
Nov 12 Javascript
Vue解决移动端弹窗滚动穿透问题
Dec 15 Vue.js
Moment的feature导致线上bug解决分析
Sep 23 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 parse_url 一个好用的函数
2009/10/03 PHP
利用PHP实现智能文件类型检测的实现代码
2011/08/02 PHP
PHP中比较时间大小实例
2014/08/21 PHP
php微信公众号开发模式详解
2016/11/28 PHP
thinkPHP中volist标签用法示例
2016/12/06 PHP
IE 缓存策略的BUG的解决方法
2007/07/21 Javascript
nodejs获取本机内网和外网ip地址的实现代码
2014/06/01 NodeJs
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
2015/11/30 Javascript
AngularJS 实现弹性盒子布局的方法
2016/08/30 Javascript
关于微信上网页图片点击全屏放大效果
2016/12/19 Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
2017/01/13 Javascript
Vue 项目代理设置的优化
2018/04/17 Javascript
Vue开发环境中修改端口号的实现方法
2019/08/15 Javascript
JavaScript 实现HTML DOM增删改查操作的常见方法详解
2020/01/04 Javascript
浅析JavaScript预编译和暗示全局变量
2020/09/03 Javascript
Python备份Mysql脚本
2008/08/11 Python
Python 文件读写操作实例详解
2014/03/12 Python
python使用nntp读取新闻组内容的方法
2015/05/08 Python
Python内建数据结构详解
2016/02/03 Python
python下10个简单实例代码
2017/11/15 Python
pytorch cnn 识别手写的字实现自建图片数据
2018/05/20 Python
linux安装Python3.4.2的操作方法
2018/09/28 Python
Python判断对象是否为文件对象(file object)的三种方法示例
2019/04/26 Python
python设计微型小说网站(基于Django+Bootstrap框架)
2019/07/08 Python
PyCharm取消波浪线、下划线和中划线的实现
2020/03/03 Python
使用Django实现把两个模型类的数据聚合在一起
2020/03/28 Python
python unichr函数知识点总结
2020/12/16 Python
纽约服装和生活方式品牌:Saturdays NYC
2017/08/13 全球购物
写一个用矩形法求定积分的通用函数
2012/11/08 面试题
园林施工员岗位职责
2013/12/11 职场文书
财务科科长岗位职责
2014/03/10 职场文书
师范学院毕业生求职信
2014/06/24 职场文书
村安全生产责任书
2014/08/25 职场文书
广告业务员岗位职责
2015/02/13 职场文书
2015年高三教学工作总结
2015/07/21 职场文书
详解Vue router路由
2021/11/20 Vue.js