浅谈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中最常用的继承模式 组合继承
Aug 12 Javascript
JavaScript入门之事件、cookie、定时等
Oct 21 Javascript
JS实现自适应高度表单文本框的方法
Feb 25 Javascript
对比分析AngularJS中的$http.post与jQuery.post的区别
Feb 27 Javascript
JavaScript中常见的字符串操作函数及用法汇总
May 04 Javascript
HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
Nov 25 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
Jul 01 Javascript
最常见的左侧分类菜单栏jQuery实现代码
Nov 28 Javascript
微信小程序开发(一) 微信登录流程详解
Jan 11 Javascript
Vue.js 2.5新特性介绍(推荐)
Oct 24 Javascript
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
Sep 26 Javascript
vue data有值,但是页面{{}} 取不到值的解决
Nov 09 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
剧场版动画《PSYCHO-PASS 3 FIRST INSPECTOR》3月27日日本上映!
2020/03/06 日漫
php获取远程图片体积大小的实例
2013/11/12 PHP
PHP中TP5 上传文件的实例详解
2017/07/31 PHP
PHP实现的防止跨站和xss攻击代码【来自阿里云】
2018/01/29 PHP
PHP封装的简单连接MongoDB类示例
2019/02/13 PHP
图片连续滚动代码[兼容IE/firefox]
2009/06/11 Javascript
javascript使用正则控制input输入框允许输入的值方法大全
2014/06/19 Javascript
node.js中的fs.exists方法使用说明
2014/12/17 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
2015/10/15 Javascript
AngularJs Injecting Services Into Controllers详解
2016/09/02 Javascript
javascript 面向对象function详解及实例代码
2017/02/28 Javascript
Vue生命周期示例详解
2017/04/12 Javascript
angularjs中的$eval方法详解
2017/04/24 Javascript
react-native ListView下拉刷新上拉加载实现代码
2017/08/03 Javascript
js实现登录注册框手机号和验证码校验(前端部分)
2017/09/28 Javascript
js判断数组是否包含某个字符串变量的实例
2017/11/24 Javascript
详解JavaScript中的函数、对象
2019/04/01 Javascript
[12:36]《DOTA2》国服注册与激活指南全攻略
2013/04/28 DOTA
跟老齐学Python之用while来循环
2014/10/02 Python
Python基于smtplib模块发送邮件代码实例
2020/05/29 Python
编写html5时调试发现脚本php等网页js、css等失效
2013/12/31 HTML / CSS
伦敦时尚生活的缩影:LN-CC
2017/01/24 全球购物
北卡罗来纳州豪华家具和家居装饰店:Carolina Rustica
2018/10/30 全球购物
Weblogc domain问题
2014/01/27 面试题
软件测试英文面试题
2012/10/14 面试题
学生实习自我鉴定
2013/10/11 职场文书
暑期实习鉴定
2013/12/16 职场文书
不打扫卫生检讨书
2014/02/12 职场文书
小学二年级评语
2014/04/21 职场文书
教研活动总结
2014/04/28 职场文书
合作意向协议书
2015/01/29 职场文书
在职人员跳槽求职信
2015/03/20 职场文书
婚礼双方父亲致辞
2015/07/27 职场文书
员工安全责任协议书
2016/03/22 职场文书
社区结对共建协议书
2016/03/23 职场文书
vue项目支付功能代码详解
2022/02/18 Vue.js