JavaScript之深入对象(二)
上一篇随笔讲解了构造函数、原型及原型链相关的知识,今天让我们一起来探讨另一个问题:this。
一 this 的指向
1, 函数预编译过程中,this指向window
我们在讲解函数预编译过程的时候提到,函数在将要被执行时,会在[[scope]]属性中插入一个AO对象,AO对象包含了函数的形参、函数内声明的变量及子函数。实际上AO对象还有两个属性:this和arguments。
arguments用来存储接下来函数执行过程中接受到的实参列表。this用来接受函数中没有被声明就被赋值的变量(未声明访问将报错)。可以简单的理解为JavaScript的一种容错机制。这里的this就指向window,所以我们才说未声明的变量将被升级成window的属性。
function test(a,b){
c = 10;
console.log(arguments);
console.log(c === window.c);
}
test(1,2);
//Arguments{0:1,1:2;length:2,...} 类数组
//true
2, 全局作用域里this指向window。
JavaScript的执行环境就是window,所以在全局作用域里window === this。
console.log(this === window);//true
3, obj.method() 方法中的this指向obj
如果有对象调用方法,那么方法内的this将指向调用对象。
如果没有对象调用方法,即函数(方法)空执行,这里面的this还是将指向window。
var name = 'ru';
var obj = {
name:'ren',
method:function(){
console.log(this.name);
}
};
obj.method();//'ren'
var test = obj.method;
test();//'ru'
二 call/apply/bind
可以改变函数内部this的指向。
1, call(myThisarg,agr1,arg2,...)
call()方法使用一个指定的对象替代函数内原本的this。函数原有的参数依次添加在其后。如果第一个参数是null或者undefined,那么函数内部的this将不被改变。
function Person(name,age,sex){
this.name = name;
this.age = age;
this.sex = sex;
}
/*
function Student(name,age,sex,classes,num){
this.name = name;
this.age = age;
this.sex = sex;
this.classes = classes;
this.num = num;
}
这种写法当然能够实现我们的功能,但Student构造函数的功能完美涵盖了Person,我们是否可以在创建Student实例时调用Person以简化代码呢?当然
*/
function Student(name,age,sex,classes,num){
Person.call(this,name,age,sex);
this.classes = classes;
this.num = num;
}
var student = new Student(1,2,3,4,5);
console.log(student);//{name:1,age:2,sex:3,classes:4,num:5}
var person = {
name : 'ren',
say : function(){
console.log(this.name);
}
};
var animal = {
name : 'dog'
};
person.say();//'ren'
animal.say();//Typerror:animal.say is not a function
//我们怎么才能让dog也能学ren一样说话呢?
person.say.call(animal);//'dog'
2, apply()
apply()方法的功能和call()完全一样。只是apply以数组形式接受原函数的参数。
var arr = [50,-1,-20,2,99,38];
//我们怎么拿到arr数组中最大或最小的那个数呢?你可能第一反应当然是数组的sort方法。但今天我们有一个使用更简单的方法!
Math.max.apply(null,arr);//
Math.min.apply(null,arr);//-20
//因为这里不涉及操作this的问题,所以第一个参数为null
3, bind()
bind()方法使用方式和call()完全一样,但功能上有所差别。bind执行会返回一个函数,这个函数内部的this已被改变,等待在合适的时候被调用。
call和apply是在函数执行时改变其this的指向,而bind是先改变函数内的this指向,然后返回一个新的函数。
var person = {
name : 'ren',
say : function (){
console.log(this.name);
}
};
var animal = {
name : 'dog'
};
person.say.call(animal);//'dog' 立即返回执行结果
var test = person.say.bind(animal); //返回一个函数
console.log(test);//fn
test();//'dog'
三 callee、caller
1,callee
arguments的一个属性,指向函数本身。
一般用在立即执行函数的递归调用。因为立即执行函数会忽略函数名,所以在递归调用时可以用callee来解决。
var factorial = (function(n){
if(n == 1){
return 1;
}else{
return n * arguments.callee(n - 1);
}
}(50));
2,caller
函数的一个属性,指向执行时的父函数。全局执行时,fn.caller == null。好像并没有什么卵用?
另外,这两个属性在严格模式下还不能使用。
四 ES5严格模式
关于ES5的严格模式这里就不详细讲解了,有兴趣的同学可以去这里:
https://www.cnblogs.com/snandy/p/3428171.html
JavaScript之深入对象(二)的更多相关文章
- javascript之BOM对象(二location对象)
一.location对象提供和当前加载的文档相关的信息还有一些导航功能.location对象是window对象的属性,同时也是document对象的属性.window.location和documen ...
- Unit05: JavaScript对象概述 、 常用内置对象一 、 常用内置对象二 、 常用内置对象三
Unit05: JavaScript对象概述 . 常用内置对象一 . 常用内置对象二 . 常用内置对象三 常用内置对象使用演示: <!DOCTYPE html> <html> ...
- 前端之JavaScript:JS之DOM对象二
继续JS之DOM对象二 前面在JS之DOM中我们知道了属性操作,下面我们来了解一下节点操作.很重要!! 一.节点操作 创建节点:var ele_a = document.createElement(' ...
- 二、JavaScript语言--JS基础--JavaScript进阶篇--JavaScript内置对象
1.什么事对象 JavaScript 中的所有事物都是对象,如:字符串.数值.数组.函数等,每个对象带有属性和方法. 对象的属性:反映该对象某些特定的性质的,如:字符串的长度.图像的长宽等: 对象的方 ...
- javascript (十二)对象二
JavaScript 中的所有事物都是对象:字符串.数字.数组.日期,等等. 在 JavaScript 中,对象是拥有属性和方法的数据. 属性和方法 属性是与对象相关的值. 方法是能够在对象上执行的动 ...
- Javascript基础回顾 之(二) 作用域
本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...
- javascript中的对象,原型,原型链和面向对象
一.javascript中的属性.方法 1.首先,关于javascript中的函数/“方法”,说明两点: 1)如果访问的对象属性是一个函数,有些开发者容易认为该函数属于这个对象,因此把“属性访问”叫做 ...
- javascript中Date对象的应用——简易日历的实现
× 目录 [1]效果 [2]HTML [3]CSS[4]JS 前面的话 简易日历作为javascript中Date对象的常见应用,用途较广泛.本文将详细说明简易日历的实现思路 效果演示 HTML说明 ...
- JavaScript学习04 对象
JavaScript学习04 对象 默认对象 日期对象Date, 格式:日期对象名称=new Date([日期参数]) 日期参数: 1.省略(最常用): 2.英文-数值格式:月 日,公元年 [时:分: ...
- JavaScript学习笔记——对象知识点
javascript对象的遍历.内存分布和封装特性 一.javascript对象遍历 1.javascript属性访问 对象.属性 对象[属性] //字符串格式 //javascript属性的访问方法 ...
随机推荐
- 三维动画形变算法(Gradient-Based Deformation)
将三角网格上的顶点坐标(x,y,z)看作3个独立的标量场,那么网格上每个三角片都存在3个独立的梯度场.该梯度场是网格的微分属性,相当于网格的特征,在形变过程中随控制点集的移动而变化.那么当用户拖拽网格 ...
- js 截屏保存图片
html2canvas.js 这个js有个强大的功能,就是能将html 对应的dom生成canvas. 这样,我们就可以通过生成的canvas转化成 base64 图片,从而实现截屏功能: 核心代码如 ...
- Http协议4个新的http状态码:428、429、431、511;
1.428 Precondition Required (要求先决条件) 先决条件是客户端发送 HTTP 请求时,必须要满足的一些预设条件.一个好的例子就是 If-None-Match 头,经常用在 ...
- jvm系列(五):Java GC 分析
Java GC就是JVM记录仪,书画了JVM各个分区的表演. 什么是 Java GC Java GC(Garbage Collection,垃圾收集,垃圾回收)机制,是Java与C++/C的主要区别之 ...
- JSP指令、标签以及中文乱码
JSP指令.标签以及中文乱码 一.JSP指令简介 JSP指令(directive)是为JSP引擎而设计的,它们并不直接产生任何可见输出,而只是告诉引擎如何处理JSP页面中的其余部分. JSP指令的基本 ...
- HTTP协议请求响应模型
HTTP协议请求响应模型:以”用户登录“这个场景来描述 第一步:客户端发起请求到API接口层,操作:用户在客户端填写用户名和密码,点击登录,发送请求. 第二步:api接收到客户端发起的用户请求,api ...
- Keras(三)backend 兼容 Regressor 回归 Classifier 分类 原理及实例
backend 兼容 backend,即基于什么来做运算 Keras 可以基于两个Backend,一个是 Theano,一个是 Tensorflow 查看当前backend import keras ...
- 小米 OJ 编程比赛 02 月常规赛 3 Logic Gatekeeper CDQ分治
link:https://code.mi.com/problem/list/view?id=139 题意: 有一个1e6 * 1e6 大的格子,现在有两种操作:1,给一个子矩阵中的每个格子加上k.2, ...
- HDU6223——2017ICPC沈阳G Infinite Fraction Path
题意: 给定一个数字串,每个位子都能向(i*i+1)%n的位子转移,输出路径上,字典序最大的,长度为n的串. 参考:https://www.cnblogs.com/mountaink/p/954144 ...
- Rikka with Prefix Sum(组合数学)
Rikka with Prefix Sum 题目描述 Prefix Sum is a useful trick in data structure problems. For example, giv ...