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 相关文章推荐
IE6中使用position导致页面变形的解决方案(js代码)
Jan 09 Javascript
js动画(animate)简单引擎代码示例
Dec 04 Javascript
jquery 根据name名获取元素的value值
Feb 27 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
Sep 26 Javascript
关于JSON与JSONP简单总结
Aug 16 Javascript
微信小程序 页面跳转如何实现传值
Apr 05 Javascript
Vue.js 中的 $watch使用方法
May 25 Javascript
Vue2.0利用vue-resource上传文件到七牛的实例代码
Jul 28 Javascript
jquery tmpl模板(实例讲解)
Sep 02 jQuery
vue使用监听实现全选反选功能
Jul 06 Javascript
JavaScript 禁止用户保存图片的实现代码
Apr 28 Javascript
JS array数组检测方式解析
May 19 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 字符截取 解决中文的截取问题,不用mb系列
2009/09/29 PHP
php !function_exists("T7FC56270E7A70FA81A5935B72EACBE29"))代码解密
2011/01/07 PHP
web server使用php生成web页面的三种方法总结
2013/10/28 PHP
PHP获取MAC地址的具体实例
2013/12/13 PHP
PHP实现根据时间戳获取周几的方法
2016/02/26 PHP
PHP中静态变量的使用方法实例分析
2016/12/01 PHP
layui框架实现文件上传及TP3.2.3(thinkPHP)对上传文件进行后台处理操作示例
2018/05/12 PHP
php微信公众号开发之图片回复
2018/10/20 PHP
PDO::rollBack讲解
2019/01/29 PHP
两个比较有用的Javascript工具函数代码
2010/02/17 Javascript
php与js的区别是什么
2013/08/05 Javascript
jquery cookie的用法总结
2013/11/18 Javascript
js简单抽奖代码
2015/01/16 Javascript
javascript实现的右下角弹窗实例
2015/04/24 Javascript
你有必要知道的25个JavaScript面试题
2015/12/29 Javascript
设置点击文本框或图片弹出日历控件的实现代码
2016/05/12 Javascript
快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)
2016/08/29 Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
2016/10/31 Javascript
自己封装的一个简单的倒计时功能实例
2016/11/23 Javascript
jQuery Tree Multiselect使用详解
2017/05/02 jQuery
微信小程序框架的页面布局代码
2019/08/17 Javascript
解决Vue动态加载本地图片问题
2019/10/09 Javascript
Vue 一键清空表单的实现方法
2020/02/07 Javascript
python 从远程服务器下载日志文件的程序
2013/02/10 Python
Python Sql数据库增删改查操作简单封装
2016/04/18 Python
你所不知道的Python奇技淫巧13招【实用】
2016/12/14 Python
Python+selenium实现截图图片并保存截取的图片
2018/01/05 Python
理论讲解python多进程并发编程
2018/02/09 Python
python递归实现快速排序
2018/08/18 Python
对PyQt5的输入对话框使用(QInputDialog)详解
2019/06/25 Python
Python学习工具jupyter notebook安装及用法解析
2020/10/23 Python
软件测试笔试题
2012/10/25 面试题
GWT的应用有哪两种部署模式
2012/12/21 面试题
综合测评自我鉴定
2013/10/08 职场文书
煤矿安全生产责任书
2014/04/15 职场文书
村委会换届选举方案
2014/05/03 职场文书