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 相关文章推荐
js为鼠标添加右击事件防止默认的右击菜单弹出
Jul 29 Javascript
使用Js让Html中特殊字符不被转义
Nov 05 Javascript
JQuery中$(document)是什么意思有什么作用
Jul 21 Javascript
有关jQuery中parent()和siblings()的小问题
Jun 01 Javascript
完美的js div拖拽实例代码
Sep 24 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
Sep 25 Javascript
JS经典正则表达式笔试题汇总
Dec 15 Javascript
对比分析Django的Q查询及AngularJS的Datatables分页插件
Feb 07 Javascript
vue插件draggable实现拖拽移动图片顺序
Dec 01 Javascript
vue实现点击隐藏与显示实例分享
Feb 13 Javascript
koa大型web项目中使用路由装饰器的方法示例
Apr 02 Javascript
vue中利用iscroll.js解决pc端滚动问题
Feb 15 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桌面中心(一) 创建数据库
2007/03/11 PHP
教你如何在CI框架中使用 .htaccess 隐藏url中index.php
2014/06/09 PHP
php递归删除目录与文件的方法
2015/01/30 PHP
php远程下载类分享
2016/04/13 PHP
thinkphp实现把数据库中的列的值存到下拉框中的方法
2017/01/20 PHP
php 删除一维数组中某一个值元素的操作方法
2018/02/01 PHP
PHP实现类似题库抽题效果
2018/08/16 PHP
Laravel 类和接口注入相关的代码
2019/10/15 PHP
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/01/13 Javascript
javascript 弹出窗口中是否显示地址栏的实现代码
2011/04/14 Javascript
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
2012/01/13 Javascript
jQuery随便控制任意div隐藏的方法
2013/06/28 Javascript
JQuery 获取json数据$.getJSON方法的实例代码
2013/08/02 Javascript
JS验证IP,子网掩码,网关和MAC的方法
2015/07/02 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
2015/09/08 Javascript
js无法获取到html标签的属性的解决方法
2016/07/26 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
2016/08/09 Javascript
JavaScript获取tr td 的三种方式全面总结(推荐)
2017/08/15 Javascript
还不懂递归?读完这篇文章保证你会懂
2018/07/29 Javascript
vue-for循环嵌套操作示例
2019/01/28 Javascript
理解JavaScript中的对象
2020/08/25 Javascript
Python 字典dict使用介绍
2014/11/30 Python
Python基础知识_浅谈用户交互
2017/05/31 Python
Python学习笔记之图片人脸检测识别实例教程
2019/03/06 Python
Python实现将蓝底照片转化为白底照片功能完整实例
2019/12/13 Python
python使用dlib进行人脸检测和关键点的示例
2020/12/05 Python
Canvas与图片压缩的示例代码
2017/11/28 HTML / CSS
英国手机壳购买网站:Case Hut
2019/04/11 全球购物
EJB发布WEB服务一般步骤
2012/10/31 面试题
工厂实习感言
2014/01/14 职场文书
大学生军训感想
2014/02/16 职场文书
机械制造毕业生求职信
2014/03/03 职场文书
事假请假条范文
2014/04/11 职场文书
青春无悔演讲稿
2014/05/08 职场文书
乡镇镇长个人整改措施
2014/10/01 职场文书
Shell中的单中括号和双中括号的用法详解
2022/12/24 Servers