位置: 编程技术 - 正文

Javascript基础回顾之(三) js面向对象(javascript教程chm)

编辑:rootadmin

推荐整理分享Javascript基础回顾之(三) js面向对象(javascript教程chm),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:javascript 基础,javascript教程chm,javascript的返回值,javascript基础函数,javascript 基础,javascript的返回值,javascript 基础,javascript教程chm,内容如对您有帮助,希望把文章链接给更多的朋友!

本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者那里的一知半解,所以决定先花一些时间整理一下这些基础知识和大家分享。 后面会附上培训用的PPT。刚开始是打算写一篇的,但是后来写着写着就发现越来越多,所以决定还是写一个系列吧。本系列所有内容都是涉及Javascript基础的,没有时髦的玩意儿,但是我相信这些基础的东西会有助于你理解那些有趣的东西的。

Javascript基础回顾之(一) 类型 Javascript基础回顾 (二) 作用域 Javascript基础回顾之(三) 面向对象

  本篇是你必须知道的Javascript系列第三篇,我们主要来看看Javascript是如何面向对象的编程的。主要涉及以下内容 :

Javascript中的对象 什么是对象 遍历属性 创建对象 工厂模式 构造函数模式 详解this 在函数中 在对象方法中 在构造函数中 在call和apply中 在bind中 在dom元素事件处理函数中 详解prototype 什么是原型 什么是原型链 利用原型链实现继承 原型链中的问题

Javascript中的对象

什么是对象

我们可以把Javascript中对象理解为一组无序的键值对,就好像C#中的Dictionary<string,Object>一样。Key是属性的名称,而value可以为以下3种类型:

基本值(string, number, boolean, null, undefined) 对象 函数

遍历属性

  在C#中我们是可以用foreach对Dictionary<string,Object>进行遍历的,如果说对象在Javascript中是一组键值对的话,那我们如何进行遍历呢?

上面的这种遍历方式会把原型中的属性也包括进来,关于什么是原型,以及如何区分原型和实例中的属性我们下面会讲到。

创建对象  其实在上面我们已经创建了一个对象,并且使用了以下两种创建对象的方式。

利用new创建一个Object的实例。 字面量

我们上面的o是用第一种方式创建的,而o中的location属性则是用字面量的方式创建的。而第一种方式其实也有一种名字叫做构造函数模式,因为Object实际上是一个构造函数,为我们产生了一个Object的实例。如果对于构造函数这一块还有不清楚的话,赶紧去看我的第一篇 类型基础Object与object吧。

  除了以上两种方式以外,我们一些创建对象的方式,我们也来一起看一下:

工厂模式

这种模式创建的对象有一个问题,那就是它在函数的内部为我创建了一个Object的实例,这个实例跟我们的构造函数createPerson是没有任何关系的。

因为我在内部用new Object()来创建了这个对象,所以它是Object的实例。所以如果我们想知道它是具体哪个function的实例,那就不可能了。

构造函数模式

  工厂模式没有解决对象识别的问题,但是我们可以想一下,Object()实际上也是一个函数,只不过当我在它前面加上一个new的时候,它就变成了一个构造函数为我们产生一个Object的实例。那么我同样也可以在其它函数前面加上new这样就可以产生这个函数的实例了,这就是所谓的构造函数模式。

详解this  this在Javascript中也可以算是一个很神奇对象,没错this是一个对象。我们在上一篇作用域和作用域链中讲到了变量对象,变量对象决定了在当前的执行环境中有哪些属性和函数是可以被访问到的,从某种程度上来说我们就可以把this看作是这个变量对象。我们之前提到了最大的执行环境是全局执行环境,而window就是全局执行环境中的变量对象,那么我们在全局环境中this===window是会返回true的。

除了全局执行环境以外,我们还提到了另外一种执行环境,也就是函数。每一个函数都有一个this对象,但有时候他们所代表的值是不一样的,主要是这个函数的调用者来决定的。我们来看一下以下几种场景:

函数

Javascript基础回顾之(三) js面向对象(javascript教程chm)

因为当前的函数在全局函数中运行,所以函数中的this对象指向了全局变量对象,也就是window。这种方式在严格模式下会返回undefined。

对象方法

在对象方法中,this对象指向了当前这个实例对象。注意: 不管这个函数在哪里什么时候或者怎么样定义,只要它是一个对象实例的方法,那么它的this都是指向这个对象实例的。

区别:上面的函数independent如果直接执行,this是指向全局执行环境,那么this.prop是指向我们的全局变量prop的。但是如果将independent设为对象o的一个属性,那么independent中的this就指向了这个实例,同理this.prop就变成了对象o的prop属性。

构造函数

  我们上面讲到了用构造函数创建对象,其实是利用了this的这种特性。在构造函数中,this对象是指向这个构造函数实例化出来的对象。

当我们实例化Person得到p1的时候,this指向p1。而当我们实例化Person得到p2的时候,this是指向p2的。

利用call和apply

  当我们用call和apply去调用某一个函数的时候,这个函数中的this对象会被绑定到我们指定的对象上。而call和apply的主要区别就是apply要求传入一个数组作为参数列表。

在bind方法中

  bind方法是 存在于function的原型中的 Function.prototype.bind,也就是说所有的function都会有这个方法。但我们调用某一个方法的bind的时候,会产生一个和原来那个方法一样的新方法,只不过this是指向我们传得bind的第一个参数。

在dom元素事件处理器中

  在事件处理函数中,我们的this是指向触发这个事件的dom元素的。

HTML代码

JavaScript代码

当我们点击页面那个div的时候,毫无疑问,它是会显示DIV的。

详解prototype  prototype即原型,也是Javascrip中一个比较重要的概念。在说原型之前呢,我们需要回顾一下之前的构造函数模式。在我们用构造函数去创建对象的时候主要是利用了this的特性。

我们上面还讲到了当用Person实例化p1的时候Person中的this是指向p1的,当实例化p2的时候呢,this是指向p2的。那也就是说,p1和p2中的sayName虽然起到了同样的作用,但是实际上他们并非是一个函数。

也就是说他们内存堆中是存在多份拷贝的,而不是在栈中引用地址的拷贝。先不说这符不符合面向对象的思想,至少这对于内存来说也是一种浪费。而解决办法就是我们要讨论的原型。

什么是原型

  在Javascript中的每一个函数,都会有一个原型对象,这个原型对象和我们普通的对象没有区别。只不过默认会有一个constructor属性指向这个函数。 同时,所有这个函数的实例都会有一个引用指向这个原型对象。如果不太清楚,那就看看下面这张图吧:

标签: javascript教程chm

本文链接地址:https://www.jiuchutong.com/biancheng/376045.html 转载请保留说明!

上一篇:Javascript基础回顾之(二) js作用域(javascript教程chm)

下一篇:JavaScript字符集编码与解码详谈(js字符串的操作方法)

  • 金税三期的内容是什么
  • 纳税人证明模板
  • 预付卡的发票
  • 提现的现金流量代码是什么
  • 事业单位资产划转流程
  • 五险一金可以在手机上交吗
  • 记账凭证包括哪些种类
  • 软件公司购进软件会计科目
  • 股东借款利息代扣代缴增值税是怎样算的?
  • 未盖发票章怎么办
  • 发票联丢失用抵扣联做账可以吗
  • 饭店取得的烟酒是什么
  • 农产品销售发票能否抵扣进项税?
  • 土地增值税四级税率表
  • 甲供材项目施工方怎样开票
  • 固定资产内部调拨流程
  • 小规模纳税人附加税会计分录
  • 我的初级备考经验,认真就有收获
  • 出售股票公允价值变动损益
  • 税负率一般控制在多少合适
  • 制造业企业存货管理论文
  • 对公账户资金往来会产生税吗
  • 化工厂危险废物种类以及处置方式
  • win10怎么用wifi上网
  • 在linux2.4.0版本中
  • backupnotify.exe是什么文件的进程 backupnotify进程安全吗
  • 如何保护电子邮件账户不被黑客攻击
  • 360tray.exe损坏文件怎么修复
  • 暂估营业成本怎做分录
  • 销售不动产应交的增值税计入
  • PHP:pg_lo_unlink()的用法_PostgreSQL函数
  • PHP:pg_last_error()的用法_PostgreSQL函数
  • 存放中央银行款项科目按其资金性质
  • 豁免债权如何做账
  • php redis常用命令
  • 劳务报酬已扣税是否需报个税
  • vue创建项目后开始写的步骤
  • 差旅费报销应注意什么
  • yii框架搜索分页modle写法
  • 【第三趴】uni-app页面搭建与路由配置(了解工程目录结构、学会搭建页面、配置路由并成功运行)
  • vue2计算属性和vue3的计算属性的区别
  • 深度学习之concatenate和elementwise操作(二)
  • 合并报表少数股东权益抵消分录
  • 减免残保金的操作方法
  • 契税计入会计利润总额吗
  • 资产合计数怎么算的
  • 信用证保证金有利息吗
  • 小规模减免税款会计分录
  • 公司交的养老保险的钱可以取出来吗
  • 外部审计的构成
  • 固定资产停产需要计提折旧吗
  • 主营业务收入计入借方还是贷方
  • 收到利息收入如何做分录
  • 流动比率计算公式是年初还是年末
  • 融资租赁财产保全金额是多少
  • 商品的结构
  • 材料成本多少合适
  • 会计核算是否健全划分为
  • 简易计税转出
  • 应交税费进项税额转出
  • 企业所得税预缴2‰
  • 一般纳税人原材料的入账价值怎么算
  • 如何制作u盘系统win7
  • 电脑鼠标滑动时没法动,怎么办?
  • Win10 Mobile 10549预览版增DPI缩放 瞬间手机变电脑
  • lol进入游戏后电脑没声音
  • 安卓 图形api
  • 利用jQuery及AJAX技术定时更新GridView的某一列数据
  • python开发软件教程
  • javascript教程
  • javascript和html区别
  • python批量填表
  • 江苏电子税务局网站官网
  • 如何在网上查看自己的征信
  • 上海税务网厅
  • 退伍军人坐火车要钱吗
  • 缴款书的基本内容
  • 怎么查询地方规划用地
  • 发票专用章盖在哪里
  • 河南省税务局领导班子名单
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设