js中的面向对象之对象常见创建方法详解


Posted in Javascript onDecember 16, 2019

本文实例讲述了js中的面向对象之对象常见创建方法。分享给大家供大家参考,具体如下:

创建对象的几种常用方式

1.使用Object或对象字面量创建对象

2.工厂模式创建对象

3.构造函数模式创建对象

4.原型模式创建对象

1.使用Object或对象字面量创建对象

使用object

var student = new Object();
student.name = "easy";
student.age = "20";

使用字面量

var sutdent = {
 name : "easy",
 age : 20
};

2.工厂模式创建对象

function createStudent(name, age) {
 var obj = new Object();
 obj.name = name;
 obj.age = age;
 return obj;
}
var student1 = createStudent("easy1", 20);
var student2 = createStudent("easy2", 20);
...
var studentn = createStudent("easyn", 20);

3.构造函数模式创建对象

在上面创建Object这样的原生对象的时候,我们就使用过其构造函数

var obj = new Object();

在创建原生数组Array类型对象时也使用过其构造函数:

var arr = new Array(10); //构造一个初始长度为10的数组对象

我们首先了解一下构造函数和普通函数有什么区别。

1、实际上并不存在创建构造函数的特殊语法,其与普通函数唯一的区别在于调用方法。对于任意函数,使用new操作符调用,那么它就是构造函数;不使用new操作符调用,那么它就是普通函数。

2、按照惯例,我们约定构造函数名以大写字母开头,普通函数以小写字母开头,这样有利于显性区分二者。例如上面的new Array(),new Object()。

3、使用new操作符调用构造函数时,会经历(1)创建一个新对象;(2)将构造函数作用域赋给新对象(使this指向该新对象);(3)执行构造函数代码;(4)返回新对象;4个阶段。

ok,了解了构造函数和普通函数的区别之后,我们使用构造函数将工厂模式的函数重写,并添加一个方法属性:

function Student(name, age) {
 this.name = name;
 this.age = age;
 this.alertName = function(){
  alert(this.name)
 };
}
function Fruit(name, color) {
 this.name = name;
 this.color = color;
 this.alertName = function(){
  alert(this.name)
 };
}

这样我们再分别创建Student和Fruit的对象

var v1 = new Student("easy", 20);
var v2 = new Fruit("apple", "green");

这时我们再来用instanceof操作符来检测以上对象类型就可以区分出Student以及Fruit了:

alert(v1 instanceof Student); //true
alert(v2 instanceof Student); //false
alert(v1 instanceof Fruit); //false
alert(v2 instanceof Fruit); //true
alert(v1 instanceof Object); //true 任何对象均继承自Object
alert(v2 instanceof Object); //true 任何对象均继承自Object

可以将上面的函数简化:Student和Fruit对象中共有同样的方法移到构造函数外部

function Student(name, age) {
 this.name = name;
 this.age = age;
}
function Fruit(name, color) {
 this.name = name;
 this.color = color;
};
function alertName() {
 alert(this.name);
}

我们通过将alertName()函数定义为全局函数,这样对象中的alertName属性则被设置为指向该全局函数的指针。由此stu1和stu2共享了该全局函数,解决了内存浪费的问题

但是,通过全局函数的方式解决对象内部共享的问题,终究不像一个好的解决方法。如果这样定义的全局函数多了,我们想要将自定义对象封装的初衷便几乎无法实现了。

更好的方案是通过原型对象模式来解决。

4.原型的模式创建对象

原型链甚至原型继承,是整个JS中最难的一部分也是最不好理解的一部分,在这里由于我们课程定位的原因,如果对js有兴趣的同学,可以去查阅一下相关JS原型的一些知识点。

function Student() {
  this.name = 'easy';
  this.age = 20;
}
Student.prototype.alertName = function(){
  alert(this.name);
};
var stu1 = new Student();
var stu2 = new Student();
stu1.alertName(); //easy
stu2.alertName(); //easy
alert(stu1.alertName == stu2.alertName); //true 二者共享同一函数

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

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

Javascript 相关文章推荐
js模拟点击事件实现代码
Nov 06 Javascript
js 高效去除数组重复元素示例代码
Dec 19 Javascript
JS应用正则表达式转换大小写示例
Sep 18 Javascript
jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
Sep 18 Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
Sep 22 Javascript
vue.js初学入门教程(1)
Nov 03 Javascript
详解vue.js移动端导航navigationbar的封装
Jul 05 Javascript
Angular.js前台传list数组由后台spring MVC接收数组示例代码
Jul 31 Javascript
jQuery实现的简单无刷新评论功能示例
Nov 08 jQuery
setTimeout时间设置为0详细解析
Mar 13 Javascript
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 jQuery
Java无向树分析 实现最小高度树
Apr 09 Javascript
js实现数字滚动特效
Dec 16 #Javascript
NUXT SSR初级入门笔记(小结)
Dec 16 #Javascript
js实现内置计时器
Dec 16 #Javascript
js实现秒表计时器
Dec 16 #Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
Dec 16 #Javascript
js实现计时器秒表功能
Dec 16 #Javascript
原生Vue 实现右键菜单组件功能
Dec 16 #Javascript
You might like
第十节 抽象方法和抽象类 [10]
2006/10/09 PHP
PHP在Web开发领域的优势
2006/10/09 PHP
php学习之流程控制实现代码
2011/06/09 PHP
深入分析PHP优化及注意事项
2016/07/04 PHP
可兼容php5与php7的cURL文件上传功能实例分析
2018/05/11 PHP
javascript 面向对象思想 附源码
2009/07/07 Javascript
网页自动跳转代码收集
2009/09/27 Javascript
原生js和jquery中有关透明度设置的相关问题
2014/01/08 Javascript
javascript中sort() 方法使用详解
2015/08/30 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记6)
2015/12/20 Javascript
JS获取IMG图片高宽的简单实例
2016/05/17 Javascript
详解Nodejs基于mongoose模块的增删改查的操作
2016/12/21 NodeJs
很棒的vue弹窗组件
2017/05/24 Javascript
jquery根据name取得select选中的值实例(超简单)
2018/01/25 jQuery
React styled-components设置组件属性的方法
2018/08/07 Javascript
vue 刷新之后 嵌套路由不变 重新渲染页面的方法
2018/09/13 Javascript
实用的Vue开发技巧
2019/05/30 Javascript
layui实现下拉复选功能的例子(包括数据的回显与上传)
2019/09/24 Javascript
Vuex实现数据增加和删除功能
2019/11/11 Javascript
基于node+websocket+html实现腾讯课堂聊天室聊天功能
2020/03/04 Javascript
python的几种开发工具介绍
2007/03/07 Python
python获取图片颜色信息的方法
2015/03/18 Python
SQLite3中文编码 Python的实现
2017/01/11 Python
Django正则URL匹配实现流程解析
2020/11/13 Python
运行python提示no module named sklearn的解决方法
2020/11/29 Python
Python的信号库Blinker用法详解
2020/12/31 Python
利用css3画个同心圆示例代码
2017/07/03 HTML / CSS
使用Html5 Stream开发实时监控系统
2020/06/02 HTML / CSS
旅游业大学生创业计划书
2014/01/31 职场文书
新教师工作感言
2014/02/16 职场文书
团日活动总结
2014/04/28 职场文书
工作失误检讨书
2015/01/26 职场文书
导游词之澳门妈祖庙
2019/12/19 职场文书
Mongo服务重启异常问题的处理方法
2021/07/01 MongoDB
Python学习之时间包使用教程详解
2022/03/21 Python
Spring Boot接口定义和全局异常统一处理
2022/04/20 Java/Android