JavaScript创建对象_动力节点Java学院整理


Posted in Javascript onJune 27, 2017

JavaScript对每个创建的对象都会设置一个原型,指向它的原型对象。

当我们用obj.xxx访问一个对象的属性时,JavaScript引擎先在当前对象上查找该属性,如果没有找到,就到其原型对象上找,如果还没有找到,就一直上溯到Object.prototype对象,最后,如果还没有找到,就只能返回undefined。
例如,创建一个Array对象:

var arr = [1, 2, 3];

其原型链是:

arr ----> Array.prototype ----> Object.prototype ----> null

Array.prototype定义了indexOf()、shift()等方法,因此你可以在所有的Array对象上直接调用这些方法。
当我们创建一个函数时:

function foo() {
 return 0;
}

函数也是一个对象,它的原型链是:

foo ----> Function.prototype ----> Object.prototype ----> null

由于Function.prototype定义了apply()等方法,因此,所有函数都可以调用apply()方法。

很容易想到,如果原型链很长,那么访问一个对象的属性就会因为花更多的时间查找而变得更慢,因此要注意不要把原型链搞得太长。

构造函数

除了直接用{ ... }创建一个对象外,JavaScript还可以用一种构造函数的方法来创建对象。它的用法是,先定义一个构造函数:

function Student(name) {
 this.name = name;
 this.hello = function () {
  alert('Hello, ' + this.name + '!');
 }
}

你会问,咦,这不是一个普通函数吗?

这确实是一个普通函数,但是在JavaScript中,可以用关键字new来调用这个函数,并返回一个对象:

var xiaoming = new Student('小明');
xiaoming.name; // '小明'
xiaoming.hello(); // Hello, 小明!

注意,如果不写new,这就是一个普通函数,它返回undefined。但是,如果写了new,它就变成了一个构造函数,它绑定的this指向新创建的对象,并默认返回this,也就是说,不需要在最后写return this;。

新创建的xiaoming的原型链是:

xiaoming ----> Student.prototype ----> Object.prototype ----> null

也就是说,xiaoming的原型指向函数Student的原型。如果你又创建了xiaohong、xiaojun,那么这些对象的原型与xiaoming是一样的:
xiaoming ?
xiaohong -→ Student.prototype ----> Object.prototype ----> null
xiaojun  ?

用new Student()创建的对象还从原型上获得了一个constructor属性,它指向函数Student本身:

xiaoming.constructor === Student.prototype.constructor; // true
Student.prototype.constructor === Student; // true

Object.getPrototypeOf(xiaoming) === Student.prototype; // true

xiaoming instanceof Student; // true

看晕了吧?用一张图来表示这些乱七八糟的关系就是:

JavaScript创建对象_动力节点Java学院整理

红色箭头是原型链。注意,Student.prototype指向的对象就是xiaoming、xiaohong的原型对象,这个原型对象自己还有个属性constructor,指向Student函数本身。
另外,函数Student恰好有个属性prototype指向xiaoming、xiaohong的原型对象,但是xiaoming、xiaohong这些对象可没有prototype这个属性,不过可以用__proto__这个非标准用法来查看。
现在我们就认为xiaoming、xiaohong这些对象“继承”自Student。
不过还有一个小问题,注意观察:

xiaoming.name; // '小明'
xiaohong.name; // '小红'
xiaoming.hello; // function: Student.hello()
xiaohong.hello; // function: Student.hello()
xiaoming.hello === xiaohong.hello; // false

xiaoming和xiaohong各自的name不同,这是对的,否则我们无法区分谁是谁了。
xiaoming和xiaohong各自的hello是一个函数,但它们是两个不同的函数,虽然函数名称和代码都是相同的!
如果我们通过new Student()创建了很多对象,这些对象的hello函数实际上只需要共享同一个函数就可以了,这样可以节省很多内存。

要让创建的对象共享一个hello函数,根据对象的属性查找原则,我们只要把hello函数移动到xiaoming、xiaohong这些对象共同的原型上就可以了,也就是Student.prototype:

JavaScript创建对象_动力节点Java学院整理

修改代码如下:

function Student(name) {
 this.name = name;
}

Student.prototype.hello = function () {
 alert('Hello, ' + this.name + '!');
};

用new创建基于原型的JavaScript的对象就是这么简单!

忘记写new怎么办

如果一个函数被定义为用于创建对象的构造函数,但是调用时忘记了写new怎么办?
在strict模式下,this.name = name将报错,因为this绑定为undefined,在非strict模式下,this.name = name不报错,因为this绑定为window,于是无意间创建了全局变量name,并且返回undefined,这个结果更糟糕。
所以,调用构造函数千万不要忘记写new。为了区分普通函数和构造函数,按照约定,构造函数首字母应当大写,而普通函数首字母应当小写,这样,一些语法检查工具如jslint将可以帮你检测到漏写的new。
最后,我们还可以编写一个createStudent()函数,在内部封装所有的new操作。一个常用的编程模式像这样:

function Student(props) {
 this.name = props.name || '匿名'; // 默认值为'匿名'
 this.grade = props.grade || 1; // 默认值为1
}

Student.prototype.hello = function () {
 alert('Hello, ' + this.name + '!');
};

function createStudent(props) {
 return new Student(props || {})
}

这个createStudent()函数有几个巨大的优点:一是不需要new来调用,二是参数非常灵活,可以不传,也可以这么传:

var xiaoming = createStudent({
 name: '小明'
});

xiaoming.grade; // 1

如果创建的对象有很多属性,我们只需要传递需要的某些属性,剩下的属性可以用默认值。由于参数是一个Object,我们无需记忆参数的顺序。如果恰好从JSON拿到了一个对象,就可以直接创建出xiaoming。

练习

请利用构造函数定义Cat,并让所有的Cat对象有一个name属性,并共享一个方法say(),返回字符串'Hello, xxx!':

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
asp.net HttpHandler实现图片防盗链
Nov 09 Javascript
让div层随鼠标移动的实现代码 ie ff
Dec 18 Javascript
jsTree 基于JQuery的排序节点 Bug
Jul 26 Javascript
深入理解javascript作用域和闭包
Sep 23 Javascript
深入理解jQuery3.0的domManip函数
Sep 01 Javascript
vue父子组件的数据传递示例
Mar 07 Javascript
使用watch监听路由变化和watch监听对象的实例
Feb 24 Javascript
解决vue的 v-for 循环中图片加载路径问题
Sep 03 Javascript
vue返回上一页面时回到原先滚动的位置的方法
Dec 20 Javascript
Vue组件基础用法详解
Feb 05 Javascript
Vue + Element-ui的下拉框el-select获取额外参数详解
Aug 14 Javascript
js中Object.create实例用法详解
Oct 05 Javascript
JavaScript字符串_动力节点Java学院整理
Jun 27 #Javascript
JavaScript变量作用域_动力节点Java学院整理
Jun 27 #Javascript
详解微信小程序 登录获取unionid
Jun 27 #Javascript
JavaScript定义函数_动力节点Java学院整理
Jun 27 #Javascript
详解vue项目构建与实战
Jun 27 #Javascript
微信小程序 蓝牙的实现实例代码
Jun 27 #Javascript
微信小程序 开发MAP(地图)实例详解
Jun 27 #Javascript
You might like
如何在PHP中使用Oracle数据库(5)
2006/10/09 PHP
PHP 长文章分页函数 带使用方法,不会分割段落,翻页在底部
2009/10/22 PHP
PHP 修复未正常关闭的HTML标签实现代码(支持嵌套和就近闭合)
2012/06/07 PHP
PHP实现简单计算器小程序
2020/08/28 PHP
js实现多选项切换导航菜单的方法
2015/02/06 Javascript
Javascript中的Callback方法浅析
2015/03/15 Javascript
js图片翻书效果代码分享
2015/08/20 Javascript
9个让JavaScript调试更简单的Console命令
2016/11/14 Javascript
Web 开发中Ajax的Session 超时处理方法
2017/01/19 Javascript
微信小程序 Toast自定义实例详解
2017/01/20 Javascript
JavaScript事件方法(实例讲解)
2017/06/27 Javascript
js实现京东轮播图效果
2017/06/30 Javascript
Nuxt.js实战详解
2018/01/18 Javascript
基于vue-element组件实现音乐播放器功能
2018/05/06 Javascript
vue 下列表侧滑操作实例代码详解
2018/07/24 Javascript
微信小程序数据统计和错误统计的实现方法
2019/06/26 Javascript
JavaScript语句错误throw、try及catch实例解析
2020/08/18 Javascript
Python插件virtualenv搭建虚拟环境
2017/11/20 Python
centos6.8安装python3.7无法import _ssl的解决方法
2018/09/17 Python
python机器学习之神经网络实现
2018/10/13 Python
NumPy 基本切片和索引的具体使用方法
2019/04/24 Python
python使用pandas处理大数据节省内存技巧(推荐)
2019/05/05 Python
Python3 文章标题关键字提取的例子
2019/08/26 Python
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
2013/01/06 HTML / CSS
地理科学专业毕业生求职信
2013/10/15 职场文书
医学生求职自荐信
2013/10/25 职场文书
毕业学生推荐信
2013/12/01 职场文书
大学生英语演讲稿
2014/04/24 职场文书
酒店管理专业毕业生求职自荐信
2014/04/28 职场文书
艺术设计专业求职自荐信
2014/05/19 职场文书
群众路线教育实践活动自我剖析思想汇报
2014/10/04 职场文书
2014年班组长工作总结
2014/11/20 职场文书
医生个人年度总结
2015/02/28 职场文书
2016教师学习教育法心得体会
2016/01/19 职场文书
mysql 乱码 字符集latin1转UTF8
2022/04/19 MySQL
Python pyecharts案例超市4年数据可视化分析
2022/08/14 Python