javascript-this,call,apply,bind简述1
最近在系统的学习面向对象方面的知识,遇到的最大拦路虎就数this的指向,call,apply,bind函数的使用,单独抽出一天时间把这几个烦人的家伙搞定,去学习更深入的内容。
首先介绍一下this的一些东西,this和call还有莫大的关系,在第一节先不讨论这两在一起的情况。先看看this的应用场景(快餐选手可以直接跳过看后边的总结,一下这些代码只是我学习总结的过程)
1.全局作用域和一般函数
this===window //true
function fn(){ return this;
}
fn()===window //true
可以看到,全局作用域中的this和一般函数里边的this指向都是指向window的。
2.函数作为对象的一个属性
函数作为对象的一个属性,并且作为对象的一个属性被调用时,函数中的this指向该对象,如下代码this指向了作用域所在的对象obj。。
var obj={
age:30,
fn:function(){
return this.age
}
}
obj.fn() //
那函数不作为对象的属性调用呢,看代码:
var obj={
age:30,
fn:function(){
return this //此时this指向window
return this.age
}
}
var f=obj.fn;
f.fn() //undefind
该函数的调用是作为定义的全局对象f来执行的,和上边的一般函数的调用实质上是一样的,所以this也会指向window
3.构造器中的this
function Class(){
this.age=30
}
var man=new Class() //man.age=30
function Class2(){
this.age=30
return {age:38}
}
var man2=new Class2() //man2.age=38
这里的this代表new出来的那个对象。new会返回一个对象,如果这个对象未定义,则默认return出this对象,在Class2这个构造函数中,如果返回值只有一个age,其他属性是不能调用的,这就可以解释为什么this是new出来的对象,可以自己试一下。
4.对象原型链上的this
a.构造函数的prototype
function Fn(name,age){
this.name=name;
this.age=age
}
Fn.prototype.getName=function(){
console.log(this.name)
}
var f1=new Fn("Lebro",30);
f1.getName() //Lebro
b.在整个原型链继承上的this
var obj={
fn:function(){
return this.a+this.b
}
}
var p=Object.creat(obj); //对象p继承了obj的fn函数
p.a=1;p.b=2;
p.fn() //
由此可见,不管是构造函数的prototype,即便是在整个原型链继承中,this代表的也都是当前对象。
5.call()/apply()上的this
var obj={
a:10
}
var fn=function(){
console.log(this)
}
fn.call(obj); //{a:10}
当一个函数被call和apply调用时,this的值就取传入的对象的值。我也觉得有点拗口,下节把这几个兄弟再仔细解析一下他们的用法。
总结:this的取值是在函数调用时确定的,在函数声明阶段无法确定(说了一句废话,this设计出来就是为了复用,如果声明阶段就确定了那复用就无从谈起)。
this总是指向调用this所在函数的那个对象或者作用域。
这句话其实也是符合call函数的,定义:调用一个对象的一个方法,以另一个对象替换当前对象,在上述例子中其实就是用对象obj替代window来调用fn函数,因此fn里的this就指向调用fn的那个对象obj。this大概有点眉目了吧,下一步就解决三巨头的问题。。。
javascript-this,call,apply,bind简述2 http://www.cnblogs.com/wangxiaosan/p/5513302.html
javascript-this,call,apply,bind简述1的更多相关文章
- javascript-this,call,apply,bind简述2
上节我们一起研究了this这个小兄弟,得出一个结论,this指向调用this所在函数(或作用域)的那个对象或作用域.不太理解的朋友可以看看上节的内容,这次我们主要探讨一下call(),apply(), ...
- javascript中call,apply,bind的用法对比分析
这篇文章主要给大家对比分析了javascript中call,apply,bind三个函数的用法,非常的详细,这里推荐给小伙伴们. 关于call,apply,bind这三个函数的用法,是学习java ...
- JavaScript中call,apply,bind方法的总结。
why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之前,通常会有这些问题. var a = { user:"追梦子", fn:f ...
- JavaScript中call,apply,bind方法的总结
原文链接:http://www.cnblogs.com/pssp/p/5215621.html why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之 ...
- JavaScript中call,apply,bind方法的区别
call,apply,bind方法一般用来指定this的环境. var a = { user:"hahaha", fn:function(){ console.log(this.u ...
- JavaScript中call,apply,bind方法
why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之前,通常会有这些问题. var a = { user:"追梦子", fn:f ...
- JavaScript 之 call apply bind
关键字 this 绑定的方法 this的动态切换,固然为JavaScript创造了巨大的灵活性,但也使得编程变得困难和模糊.有时,需要把this固定下来,避免出现意想不到的情况.JavaScript提 ...
- javascript-this,call,apply,bind简述3
上节介绍了call()和apply()的用法,这节再讨论一下arguments参数和bind函数的用法以及函数柯里化就算是完结了. bind()函数 先看定义: bind()方法会创建一个函数的实例, ...
- javascript中call,apply,bind的使用
不同点: 1.call():传参方式跟bind一样(都是以逗号隔开的传参方式),但是跟apply(以数组的形式传参)不一样, 2.bind(): 此方法应用后的情形跟call和apply不一样.该方法 ...
随机推荐
- java之数组
数组概述: 1.数组可以看成是多个相同数据类型数据的组合,对这些数据的统一管理. 2.数组变量属引用类型,数组也可以看成是对象,数组中的每个元素相当于该对象的成员变量. 3.数组中的元素可以是任何类型 ...
- 【Thinking in Java-CHAPTER 1&&2】对象导论&&一切都是对象
JAVA起源 从JDK诞生到现在已经有11年的时间了.沧海桑田一瞬间.转眼11年过去了,JDK已经发布了6个版本.在这11年里诞生了无数和Java相关的技术和标准.现在让我们进入时间隧道,重新回到19 ...
- Money类
public class Money { /// <summary> /// 要转换的数字 /// </summary> private double j; private s ...
- (译)ECMAScript 5 Objects and Properties (二)
继 (译)ECMAScript 5 Objects and Properties 全文地址 http://ejohn.org/blog/ecmascript-5-objects-and-propert ...
- 编译Libgdiplus遇到的问题
https://github.com/mono/libgdiplus/releases 下载最新版本 解压并执行 ./autogen.sh,在执行此步时遇到如下问题,并帖出解决办法 问题:执行 ...
- 结对编程之Fault、Error、Failure
1.结对说明 结对对象:刘世麟 博客地址:http://www.cnblogs.com/liushilin/ 双方贡献:1:1 2.题目要求 构造程序,分别是: •不能触发Faul ...
- IE11之F12 Developer Tools--DOM Explorer
使用DOM Explorer工具查看网页的DOM状态.检查HTML结构和CSS样式,并测试更改以解决显示问题.这可以在元素位置错误或行为异常时帮助你诊断问题,然后解决问题. DOM Explorer图 ...
- enum to IEnumerable<T>
想foreach一个枚举,发觉它特别复杂,因此先把枚举转换为IEnumerable接口之后,简单多了.下面是枚举(enum)转换为IEnumerable接口方法: 使用:修改这篇<程序一旦发觉写 ...
- 【jQuery基础学习】11 jQuery性能简单优化
关于性能优化 合适的选择器 $("#id")会直接调用底层方法,所以这是最快的.如果这样不能直接找到,也可以用find方法继续查找 $("p")标签选择器也是直 ...
- 晒自己做的一个管理系统(清新风格)EasyUI
最近项目结束了,现在也要自己总结一下自己的成果了,总结会加深自己对项目的印象的.这里我就先晒一些作品图片了,希望大家看了会赞美一个! 项目虽然结束了,但是接下来的这个项目可就不是我一个人可以搞定的了, ...