解析JavaScript面向对象概念中的Object类型与作用域


Posted in Javascript onMay 10, 2016

引用类型

引用类型主要包括:Object 类型、Array 类型、Date 类型、RegExp 类型、Function 类型等等。

引用类型使用时,需要从它们身上生成一个对象(实例)。也就是说,引用类型相当于一个模版,当我们想要用某个引用类型的时候,就需要用这个模版来生成一个对象来使用,所以引用类型有时候也称作对象定义。

例如,我们需要生成一个 person 对象,来定义某人的个人信息和行为,那么我们就需要依赖 Object 类型:

var person = new Object();
person.name = "jiangshui";
person.sayName = function(){
  console.log(this.name);
}

上面的这个 person 对象,通过 new 操作符使用 Object 类型这个“模版”定义。之后就可以对这个对象添加属性 name 和方法 sayName 了。属性和方法是 Object 类型具有的“功能”,所以通过 Object 等引用类型创建的对象就可以用这个了。

创建对象不一定非得需要用 new 操作符,有一些类型可以简化的创建,例如创建一个上面那样的 Object 类型的对象,也可以使用下面两种方法:

var person = {};
person.name = "jiangshui";
person.sayName = function(){
  console.log(this.name);
}

var person = {
  name : "jiangshui",
  sayName : function(){
    console.log(this.name);
  }
};

{}操作符的功能就跟 new Object() 一样,简化了操作。上面两种写法也有一些区别,第一种是“追加”,也就是在之前的定义中,继续添加属性或者方法,如果之前已经存在了同名属性方法,则会覆盖。而第二种是“取代”,就是不管前面是否定义 person 对象的属性和方法,这个方法会用新定义的内容,整个替换掉之前定义的。因为引用类型生成的对象,是储存在内存中的一块区域,然后将其指针保存在某变量中(person),第二种写法,是生成了一个新对象(新内存区域),然后将 person 变量指向了新内存区域,所以就把之前的取代了。了解这一点对后面理解,至关重要。

其他引用类型的用法大致一致,例如 Array 类型,也可以用 [] 来生成对象,或者直接定义。生成数组对象之后,就可以按照数组的格式存储信息内容,此外对象会得到 Array 类型中定义的那些方法,例如 push、shift、sort 等等,就可以调用这些方法,例如:

var colors = [];
colors.push('red','green');
console.log(colors);

上面代码就是通过 Array 类型创建一个数组类型的对象,然后调用 Array 类型里面之前定义的 push 方法,向对象里面添加了 red 和 green 两个值,最后在控制台打印出来,就可以看到了。

call 和 apply 方法

这两个方法是 Function 类型提供的,也就是说,可以在函数上面使用。call 和 apply 方法的功能一样,就是可以扩充函数运行的作用域,区别就在于使用 call 的时候,传递给函数的参数必须逐个列举出来,而 apply 方法却不用。这样可以根据自己函数的要求来决定使用 call 或者 apply。

扩充函数运行的作用域是什么意思?举个例子你就明白了。

你可以这样理解,函数被包裹在一个容器(作用域)里面,在这个容器里面存在一些变量或者其他东西,当函数运行,调用这些变量等,就会在当前容器里面找这个东西。这个容器其实外面还包裹了一个更大的容器,如果当前小容器没有的话,函数会到更大的容器里面寻找,依次类推,一直找到最大的容器 window 对象。但是如果函数在当前小容器里面运行的时候,小容器里面有对应变量等,即便是大容器里面也有,函数还是会调用自己容器里面的。

而 call 和 apply 方法,就是解决这个问题,突破容器的限制。就前面例子:

var person = {
  name : "jiangshui",
  sayName : function(){
    console.log(this.name);
  }
};

打开 Chrome 的 Console 之后,粘贴进去执行一下,之后再执行 person.sayName() 可以看到

解析JavaScript面向对象概念中的Object类型与作用域

这时候,person 就是一个容器,其中创建了一个 sayName 方法(函数),执行的时候,必须在 person 作用域下面执行。当在最下面直接执行的时候,也就是在 window 的作用域下面执行会报错 not defined,因为 window 下面没有定义 sayName 方法。而里面的 this 指针,是一个比较特殊的东西,它指向当前作用域,this.name 的意思,就是调用当前作用域下面的 name 值。

下面我们为 window 对象添加一个 name 属性:

window.name = "yujiangshui";

或者直接

name = "yujiangshui";

因为 window 是最大的容器,所以 window 可以省略掉,所有定义的属性或者变量,都挂靠到 window 上面去了,不信可以看:

解析JavaScript面向对象概念中的Object类型与作用域

那现在我们就想在 window 这个大容器下面,运行 person 小容器里面的 sayName 方法,就需要用 call 或 apply 来扩充 sayName 方法的作用域。执行下面语句:

person.sayName.call(window);

或者

person.sayName.call(this);

输出的结果都是一样的,你也可以换用 apply 看看效果,因为这个 demo 太简单的,不需要传递参数,所以 call 和 apply 功能效果就完全一致了。

解析JavaScript面向对象概念中的Object类型与作用域

解释一下上面代码,sayName 首先是 Function 类型的实例,也就具有了 call 方法和 apply 方法,call 和 apply 方法既然是 Function 类型的方法,所以就需要用这种方式调用 person.sayName.call(window) 而不是什么 person.sayName().call(window) 之类的。

然后 call 和 apply 方法的参数,就是一个作用域(对象),表示将前面的函数在传递进去的作用域下面运行。将 window 这对象传递进去之后,sayName 方法中的 this.name 指向的就是 window.name,于是就扩充了作用域。

为什么传递 window 和 this 都是一样的效果?因为我们当前执行这个函数的位置是 window,前面说过 this 指针指向的是当前作用域,所以 this 指向的就是 window,所以就等于 window。

Javascript 相关文章推荐
srcElement表格样式
Sep 03 Javascript
jQuery 打造动态渐变按钮 详细图文教程
Apr 25 Javascript
一个简单的实现下拉框多选的插件可移植性比较好
May 05 Javascript
js浏览器本地存储store.js介绍及应用
May 13 Javascript
使用jquery实现仿百度自动补全特效
Jul 23 Javascript
jQuery常见的选择器及用法介绍
Dec 20 Javascript
ES6新特性之解构、参数、模块和记号用法示例
Apr 01 Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
Apr 13 Javascript
微信小程序中使用ECharts 异步加载数据实现图表功能
Jul 13 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
Apr 12 Javascript
深入理解JavaScript 箭头函数
May 30 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
Jun 26 Javascript
JavaScript根据CSS的Media Queries来判断浏览设备的方法
May 10 #Javascript
JavaScript中的原型prototype完全解析
May 10 #Javascript
简单解析JavaScript中的__proto__属性
May 10 #Javascript
Web Uploader文件上传插件使用详解
May 10 #Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
May 10 #Javascript
JS上传组件FileUpload自定义模板的使用方法
May 10 #Javascript
使用jQuery处理AJAX请求的基础学习教程
May 10 #Javascript
You might like
PHP树的深度编历生成迷宫及A*自动寻路算法实例分析
2015/03/10 PHP
SSO单点登录的PHP实现方法(Laravel框架)
2016/03/23 PHP
php制作基于xml的RSS订阅源功能示例
2017/02/08 PHP
php实现数组中出现次数超过一半的数字的统计方法
2018/10/14 PHP
PHP _construct()函数讲解
2019/02/03 PHP
Laravel5框架自定义错误页面配置操作示例
2019/04/17 PHP
File文件控件,选中文件(图片,flash,视频)即立即预览显示
2009/04/09 Javascript
利用jquery动画特效和css打造的侧边弹出垂直导航
2014/04/04 Javascript
JS实现很酷的EMAIL地址添加功能实例
2015/02/28 Javascript
APP中javascript+css3实现下拉刷新效果
2016/01/27 Javascript
jQuery原理系列-css选择器的简单实现
2016/06/07 Javascript
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
2017/06/20 Javascript
js+html5实现复制文字按钮
2017/07/15 Javascript
react同构实践之实现自己的同构模板
2019/03/13 Javascript
layui表格分页 记录勾选的实例
2019/09/02 Javascript
JS实现横向跑马灯效果代码
2020/04/20 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
2020/07/22 Javascript
[01:48]完美圣典齐天大圣至宝宣传片
2016/12/17 DOTA
python获取mp3文件信息的方法
2015/06/15 Python
Python使用爬虫猜密码
2016/02/19 Python
Python内置函数reversed()用法分析
2018/03/20 Python
pyenv虚拟环境管理python多版本和软件库的方法
2019/12/26 Python
python遍历路径破解表单的示例
2020/11/21 Python
CSS3——齿轮转动关键代码
2013/05/02 HTML / CSS
标签和贴纸印刷:Lightning Labels
2018/03/22 全球购物
意大利珠宝店:Luxury Zone
2019/01/05 全球购物
为女性购买传统的印度服装和婚纱:Kalkifashion
2019/07/22 全球购物
应聘教师自荐信
2013/10/12 职场文书
酒店优秀员工事迹材料
2014/06/02 职场文书
2014四风问题对照检查材料范文
2014/09/15 职场文书
个人向公司借款协议书
2014/10/09 职场文书
银行资信证明
2015/06/17 职场文书
浅谈redis缓存在项目中的使用
2021/05/20 Redis
Ajax 的初步实现(使用vscode+node.js+express框架)
2021/06/18 Javascript
基于Go语言构建RESTful API服务
2021/07/25 Golang
win10清理dns缓存
2022/04/19 数码科技