浅谈JavaScript对象与继承


Posted in Javascript onJuly 10, 2016

JavaScript是我在C语言之后接触的第二门编程语言,大一暑假的时候在图书馆找了一本中国人写的JavaScript程序设计来看。那个时候在编程方面几乎还是小白,再加上那本书根本没有提JavaScript的编程机制,又有一些误导性的话,一直以来对JavaScript有很深的误解,认为JavaScript只是一门在浏览器上运行的面向对象语言,值此文来写下JavaScript当中很具有迷惑性和容易误解的地方。当然限于作者水平有限,也没有什么开发经验,所以难免有疏漏之处,还望批评指正。

JavaScript的对象

对象是什么

JavaScript代码当中随处可见new关键字,很容易让人产生误解,认为JavaScript是Java一样是基于类继承的语言。但是事实并非如此,JavaScript当中并没有类,那JavaScript的对象不是类那又是什么呢?某种意义上说,JavaScript的对象就是Python当中的字典(哈希表),其实也就是类似这样的键值对:

me={
  "fisrtName" : "seek",
  "lastName" : "truth" ,
  "getName" : function(){
    return this.firstName+this.lastName; //this相当于指向这个对象的指针
  }
}

这是一个比较有误解性的地方,初次看到时候觉得有点无法理解,但仔细用一用还是觉得合理,我们既可以像Python一样用[]运算符来获取元素,也可以用.操作符来获取元素:

me.firstName // => seek
me["lastName"] //=> truth
me.getName() // => seektruth

new运算符

既然JavaScript当中是没有类的,那么new运算符又是在干什么呢?这是JavaScript设计的最让人误解的地方之一。JavaScript是一门函数式编程语言,JavaScript当中函数是一等公民,JavaScript当中函数也是对象,函数对象在被创建的时候会被添加调用属性,比较坑的是JavaScript函数有两种调用方式,一种是加了new关键字的调用,一种是没有new关键字的调用,前者会返回一个对象,后者会返回return语句当中的内容。考虑下面的一段函数:

function Obj(name){
  this.name=name;
  return name;
}

如果我们用new运算符来调用:

obj = new Obj("seektruth") //obj会是一个对象:{"name": "seektruth"}

如果我们直接调用:

obj = Obj("seektruth") //obj会是一个字符串:"seektruth"

确实设计的挺坑的,我们在调用的时候需要分清楚是否需要使用new,一般来说需要用new关键字来调用的函数会采用大写开头。

还有更坑的是如果返回的返回值是一个对象:

function Obj(name){
  this.name=name;
  return {};
}

这样无论我们是否用new运算符来调用都会返回return语句里的值:

new Obj("seektruth") //=> {}
Obj("seektruth") //=> {}

设计的是什么鬼......

对象继承

原型

前面已经说到过JavaScript当中是没有类的,那JavaScript又是怎么来实现继承的呢?答案是通过原型链。在JavaScript当中,每个对象都会有一个原型,在创建对象的时候,如果不加说明的话,对象继承的原型是Object.prototype,函数对象会继承Function.prototype(Function.prototype继承Object.prototype):

Object.prototype // => {}
Function.prototype // => [Function]

我们可以通过对象的__proto__熟悉来查看对象的原型:

a={}
a.__proto__ // => {}

JavaScript通过指定对象的原型来实现继承,指定对象的原型主要有三种方式,一是在构造函数当中指明原型,二是直接修改对象的__proto__属性,三是利用Object.create函数,下面我们依次来看一看

在构造函数当中指定原型

我们可以在构造函数当中指定对象的原型:

me={
  "firstName" : "seek",
  "lastName" : "truth" ,
  "getName" : function(){
    return this.firstName+this.lastName; //this相当于指向这个对象的指针
  }
}

function Obj(name){
  this.firstName = name;
  this.__proto__ = me; //指定原型为me对象
}

指定了原型之后,我们新建了对象之后就可以访问原型的属性:

obj = new Obj("foo"); // => { firstName: 'foo' }
obj.firstName // => foo
obj.lastName // => truth
obj.getName() // => "footruth"

当访问一个对象的时候,首先会尝试在改对象当中寻找该属性,如果没有就回到原型当中寻找,直到Object.prototype。如果我们在新的对象当中重写了原型当中的属性(方法),那么实际使用的时候我们新写的属性(方法)会覆盖掉原型当中的定义,这有点像基于类的语言的函数重载。

注意如果原型me对象的lastname属性有改变,因为obj对象是在原型当中寻找属性,那么这个obj对象的lastname属性也会改变:

me.lastName = "me"
obj.lastName // => "me"
obj.getName() // => "foome"

直接改变对象的原型

我们也可以直接指定(改变)对象的原型:

obj2 = {}
obj2.__proto__ = me
obj2.firstName // => seek
obj2.lastName // => "me"
obj2.getName() // => "seekme"

使用Object.create函数

尽管说前两种方法可以解决问题,但是这两种写法并不优雅,因为JavaScript并不是基于类的语言,第一写法很容易给人以误解,JavaScript语言精粹的作者Crockford认为new就不应该出现在JavaScript语言当中,而推荐使用Object.create函数来基于原型来创建对象。Object.create函数的用法很简单:

obj3 = Object.create(me) // 以me为原型创建新的对象
obj3.firstName // => seek
obj3.lastName // => "me"
obj3.getName() // => "seekme"

obj3 = Object.create(me) 与obj2 = {};obj2.proto = me是等价的,但是前一种写法更优雅也更易于理解。

总结

JavaScript作为一门基于原型的,函数式的编程语言在设计上有很多优雅与强大之处,但同时又有很多糟粕和坑,正式如此,JavaScript也是被误解最多语言。学习了JavaScript的对象继承机制,感觉自己的水平还是大有长进的。

以上这篇浅谈JavaScript对象与继承就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 学习之旅 (1)
Feb 05 Javascript
基于jquery的代码显示区域自动拉长效果
Dec 07 Javascript
Jquery通过Ajax方式来提交Form表单的具体实现
Nov 07 Javascript
详解javascript new的运行机制
Jan 26 Javascript
新入门node.js必须要知道的概念(必看篇)
Aug 10 Javascript
ECMAScript6轮播图实践知识总结
Aug 17 Javascript
微信小程序 教程之注册程序
Oct 17 Javascript
mui框架 页面无法滚动的解决方法(推荐)
Jan 25 Javascript
深入理解 Koa 框架中间件原理
Oct 18 Javascript
微信小程序自定义键盘 内部虚拟支付
Dec 20 Javascript
使用Sonarqube扫描Javascript代码的示例
Dec 26 Javascript
JS操作JSON常用方法(10w阅读)
Dec 06 Javascript
Bootstrap框架下下拉框select搜索功能
Mar 26 #Javascript
Bootstrap轮播插件中图片变形的终极解决方案 使用jqthumb.js
Jul 10 #Javascript
深入浅析JavaScript函数前面的加号和叹号
Jul 09 #Javascript
jQuery回到顶部的代码
Jul 09 #Javascript
jQuery 跨域访问解决原理案例详解
Jul 09 #Javascript
JavaScript跨域调用基于JSON的RESTful API
Jul 09 #Javascript
checkbox 选中一个另一个checkbox也会选中的实现代码
Jul 09 #Javascript
You might like
使用PHP socke 向指定页面提交数据
2008/07/23 PHP
PHP全概率运算函数(优化版) Webgame开发必备
2011/07/04 PHP
php实现获取文件mime类型的方法
2015/02/11 PHP
php获取小程序码的实现代码(B类接口)
2020/06/13 PHP
JQuery 前台切换网站的样式实现
2009/06/22 Javascript
远离JS灾难css灾难之 js私有函数和css选择器作为容器
2011/12/11 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
2014/05/05 Javascript
使用javascript获取页面名称
2014/12/23 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
2016/01/22 Javascript
AngularJS中的Directive自定义一个表格
2016/01/25 Javascript
javascript禁止超链接跳转的方法
2016/02/02 Javascript
jQuery中判断对象是否存在的方法汇总
2016/02/24 Javascript
基于jquery实现智能提示控件intellSeach.js
2016/03/17 Javascript
vue实现点击图片放大效果
2017/08/15 Javascript
详解Vue前端生产环境发布配置实战篇
2019/05/07 Javascript
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
2020/03/02 Javascript
Nodejs 微信小程序消息推送的实现
2021/01/20 NodeJs
python中pygame模块用法实例
2014/10/09 Python
pygame学习笔记(1):矩形、圆型画图实例
2015/04/15 Python
python二分查找算法的递归实现方法
2016/05/12 Python
python 计算数组中每个数字出现多少次--“Bucket”桶的思想
2017/12/19 Python
Python结合ImageMagick实现多张图片合并为一个pdf文件的方法
2018/04/24 Python
win10 64bit下python NLTK安装教程
2018/09/19 Python
Django静态资源部署404问题解决方案
2020/05/11 Python
J.Crew官网:美国知名休闲服装品牌
2017/05/19 全球购物
英国女士和男士时尚服装网上购物:Top Labels Online
2018/03/25 全球购物
ESDlife健康生活易:身体检查预订、搜寻及比较
2019/05/10 全球购物
七年级音乐教学反思
2014/01/26 职场文书
爱牙日宣传活动总结
2015/02/05 职场文书
中学生学习保证书
2015/02/26 职场文书
大学生英文求职信范文
2015/03/19 职场文书
考研经验交流会策划书
2015/11/02 职场文书
CSS+HTML 实现顶部导航栏功能
2021/08/30 HTML / CSS
Python中异常处理用法
2021/11/27 Python
html5调用摄像头截图功能
2022/01/18 Javascript
MYSQL常用函数介绍
2022/05/05 MySQL