解析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 相关文章推荐
用javascript实现无刷新更新数据的详细步骤 asp
Dec 26 Javascript
javascript 获取图片颜色
Apr 05 Javascript
Iframe 自适应高度并实时监控高度变化的js代码
Oct 30 Javascript
jQuery lazyload 的重复加载错误以及修复方法
Nov 19 Javascript
jquery的ajax请求全面了解
Mar 20 Javascript
jquery设置控件位置的方法
Aug 21 Javascript
jQuery中add()方法用法实例
Jan 08 Javascript
js实现简单计算器
Nov 22 Javascript
jquery ajax分页插件的简单实现
Jan 27 Javascript
基于bootstrap风格的弹框插件
Dec 28 Javascript
解决vue.js 数据渲染成功仍报错的问题
Aug 25 Javascript
mpvue项目中使用第三方UI组件库的方法
Sep 30 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中的session永不过期的解决思路及实现方法分享
2011/04/20 PHP
PHP利用REFERER根居访问来地址进行页面跳转
2013/09/28 PHP
php5.3提示Function ereg() is deprecated Error问题解决方法
2014/11/12 PHP
通过php动态传数据到highcharts
2017/04/05 PHP
作为PHP程序员你要知道的另外一种日志
2018/07/30 PHP
基于jquery的文本框与autocomplete结合使用(asp.net+json)
2012/05/30 Javascript
实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等)
2013/01/11 Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
2013/09/29 Javascript
淘宝网提供的国内NPM镜像简介和使用方法
2014/04/17 Javascript
手机端页面rem宽度自适应脚本
2015/05/20 Javascript
基于javascript代码检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统
2015/12/03 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
2016/02/18 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
浅谈JavaScript中的apply/call/bind和this的使用
2017/02/26 Javascript
BootStrap导航栏问题记录
2017/07/31 Javascript
浅谈JavaScript的innerWidth与innerHeight
2017/10/12 Javascript
vue的常用组件操作方法应用分析
2018/04/13 Javascript
vue移动端轻量级的轮播组件实现代码
2018/07/12 Javascript
Node.js模拟发起http请求从异步转同步的5种用法
2018/09/26 Javascript
基于js实现的图片拖拽排序源码实例
2020/11/04 Javascript
python读取TXT到数组及列表去重后按原来顺序排序的方法
2015/06/26 Python
基于Pytorch版yolov5的滑块验证码破解思路详解
2021/02/25 Python
CSS3 新增选择器的实例
2019/11/13 HTML / CSS
amaze ui 的使用详细教程
2020/08/19 HTML / CSS
美国领先的礼品卡网站:GiftCards.com
2016/11/02 全球购物
英国空调、除湿机和通风设备排名第一:Air Con Centre
2019/02/25 全球购物
Paul Smith英国官网:英国国宝级时装品牌
2019/03/21 全球购物
个人担保书格式范文
2014/05/12 职场文书
2014年个人债务授权委托书范本
2014/09/22 职场文书
井冈山红色之旅心得体会
2014/10/07 职场文书
破坏寝室公物检讨书
2014/11/17 职场文书
同学会邀请函模板
2015/01/30 职场文书
2015社区健康教育工作总结
2015/05/20 职场文书
2016中秋节广告语
2016/01/28 职场文书
mysql字符串截取函数小结
2021/04/05 MySQL
HTML页面点击按钮关闭页面的多种方式
2022/12/24 HTML / CSS