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 相关文章推荐
IE浏览器打印的页眉页脚设置解决方法
Dec 08 Javascript
jquery ajax return没有返回值的解决方法
Oct 20 Javascript
js中单引号与双引号冲突问题解决方法
Oct 04 Javascript
jqeury-easyui-layout问题解决方法
Mar 24 Javascript
js获取滚动距离的方法
May 30 Javascript
jQuery EasyUi实战教程之布局篇
Jan 26 Javascript
JSON键值对序列化和反序列化解析
Jan 24 Javascript
Swiper自定义分页器使用详解
Dec 28 Javascript
vue-cli 引入、配置axios的方法
May 08 Javascript
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
Jan 29 Javascript
小程序实现悬浮搜索框
Jul 12 Javascript
JavaScript简单编程实例学习
Feb 14 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
全国FM电台频率大全 - 6 辽宁省
2020/03/11 无线电
php读取mysql的简单实例
2014/01/15 PHP
php封装的表单验证类完整实例
2016/10/19 PHP
php使用fputcsv实现大数据的导出操作详解
2020/02/27 PHP
Lazy Load 延迟加载图片的jQuery插件中文使用文档
2012/10/18 Javascript
基于javascript的COOkie的操作实现只能点一次
2014/12/26 Javascript
JS+CSS实现简单滑动门(滑动菜单)效果
2015/09/19 Javascript
纯JS代码实现一键分享功能
2016/04/20 Javascript
angularjs过滤器--filter与ng-repeat配合有奇效
2017/04/20 Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
2017/12/07 Javascript
ajax请求data遇到的问题分析
2018/01/18 Javascript
vue编译打包本地查看index文件的方法
2018/02/23 Javascript
JS实现的贪吃蛇游戏完整实例
2019/01/18 Javascript
jquery 验证用户名是否重复代码实例
2019/05/14 jQuery
详解mpvue开发微信小程序基础知识
2019/09/23 Javascript
浅谈vue中组件绑定事件时是否加.native
2019/11/09 Javascript
[01:30:54]《加油DOTA》 第三期
2014/08/18 DOTA
python实现simhash算法实例
2014/04/25 Python
简单谈谈Python中的元祖(Tuple)和字典(Dict)
2017/04/21 Python
python 多个参数不为空校验方法
2019/02/14 Python
python读取txt文件并取其某一列数据的示例
2019/02/19 Python
用python打印菱形的实操方法和代码
2019/06/25 Python
pycharm修改文件的默认打开方式的步骤
2019/07/29 Python
Django使用Jinja2模板引擎的示例代码
2019/08/09 Python
python如何使用Redis构建分布式锁
2020/01/16 Python
新年福利来一波之Python轻松集齐五福(demo)
2020/01/20 Python
Mac中PyCharm配置Anaconda环境的方法
2020/03/04 Python
PyQt中使用QtSql连接MySql数据库的方法
2020/07/28 Python
Python求区间正整数内所有素数之和的方法实例
2020/10/13 Python
幼儿园春季开学寄语
2014/04/03 职场文书
行政专员求职信范文
2014/05/03 职场文书
欢迎家长标语
2014/10/08 职场文书
爱国电影观后感
2015/06/19 职场文书
2016年教师党员公开承诺书
2016/03/24 职场文书
如何解决php-fpm启动不了问题
2021/11/17 PHP
Java 超详细讲解ThreadLocal类的使用
2022/04/07 Java/Android