javascript是一门解释型的语言,与很多面向对象语言相比有着不同特性,所以不能用面向对象的原理来理解this这个关键字。

在JS中,要真正理解this倒底指向哪个对象,必须先了解JS的作用域和原型链的原理。简单的说,this是与运行时的执行环境绑定的。在使用它时,我们是无法确定其this指向哪个对象,只有当真正调用时,this才会指向所调用的对象。如以下代码

var a="hi";
alert(this.a);

结果很明显,弹出一个"hi"窗口提示。

//var a="hi";
alert(this.a);

 弹出一个"undefined"窗口提示。

上面两种结果,是由于JS默认作用域是window,即a在运行时指向的是当前window这个对象,前者window存在a这个实体属性,而后者没有。

那么再看一下下面例子

var a ="hi";
function say()
{
alert(this.a);
}
say();

  弹出一个"hi"窗口提示。

//var a ="hi";
function say()
{
alert(this.a);
}
say();

  弹出一个"undefined"窗口提示。

//var a ="hi";
function say()
{
var a="say hi";
alert(this.a);
}
say();

  弹出一个"undefined"窗口提示。

//var a ="hi";
function say()
{
a="say hi";
alert(this.a);
}
say();

  弹出一个"say hi"窗口提示。

以上四个例子中,this虽然定义在say这个函数下,但函数的调用对象还是windows,1和2理解和上两个例子差不多,第3和第4则是由于作用域导致的。第3个a的作用域在仅函数里,第4中a的作用域为window(未定义直接初始化,变量作用域属于它的调用对象)。

再来点示例:

function say()
{
this.a="say hi";
}
var who= new say();
alert(who.a);

  弹出一个"say hi"窗口提示。

以上这个例子在运行时,this指向的是who这个实体,如果直接运行say()那么结果将是弹出一个"undefined",因为say()只是个函数(相当于面向对里里面的类),而new say()是一个对象,相当于面向对象里的类的实例。

说完this,下面再来整下JS里在很多框架内部源码经常看到的两个常用关键字:call.apply。其它这两个方法可以说是一个功能,只是传的参数形式不一样, xxFunction.call(A,arg,arg),xxFunction.apply(A,args)。简单的说就是调用对象来执行方法。作用,运行时辅助操作对象,常用于继承操作。

如下列代码:

function User(name){
this.name=name;
}
function Coder(name){
User.call(this,name);
this.skill="Code";
}
var coder = new Coder("xiaoming");
alert(coder.name+"擅长"+coder.skill);

  Code继承于User,并有自己的skill属性。

  

javascript中this,call,apply详解的更多相关文章

  1. javascript中的this作用域详解

    javascript中的this作用域详解 Javascript中this的指向一直是困扰我很久的问题,在使用中出错的机率也非常大.在面向对象语言中,它代表了当前对象的一个引用,而在js中却经常让我觉 ...

  2. javascript中=、==、===区别详解

    javascript中=.==.===区别详解今天在项目开发过中发现在一个小问题.在判断n==""结果当n=0时 n==""结果也返回了true.虽然是个小问题 ...

  3. JavaScript中return的用法详解

    JavaScript中return的用法详解 最近,跟身边学前端的朋友了解,有很多人对函数中的this的用法和指向问题比较模糊,这里写一篇博客跟大家一起探讨一下this的用法和指向性问题. 1定义 t ...

  4. javascript 中合并排序算法 详解

    javascript 中合并排序算法 详解 我会通过程序的执行过程来给大家合并排序是如何排序的...  合并排序代码如下: <script type="text/javascript& ...

  5. JavaScript中this的用法详解

    JavaScript中this的用法详解 最近,跟身边学前端的朋友了解,有很多人对函数中的this的用法和指向问题比较模糊,这里写一篇博客跟大家一起探讨一下this的用法和指向性问题. 1定义 thi ...

  6. JavaScript中数组Array方法详解

    ECMAScript 3在Array.prototype中定义了一些很有用的操作数组的函数,这意味着这些函数作为任何数组的方法都是可用的. 1.Array.join()方法 Array.join()方 ...

  7. JavaScript中的注释问题详解? 部分3

    注释:解释代码的含义,浏览器中不执行. 方便其他程序员了解代码 ,也可以注释自己不需要的代码(开发过程中)! 1. 单行注释 // 用于一行代码上面 2.多行注释 /* */ 用于一段代码上面 或者是 ...

  8. JavaScript中的async/await详解

    1.前言 ​ async函数,也就是我们常说的async/await,是在ES2017(ES8)引入的新特性,主要目的是为了简化使用基于Promise的API时所需的语法.async和await关键字 ...

  9. Javascript中prototype属性的详解

    原文链接:http://www.cnblogs.com/Uncle-Keith/p/5834289.html 在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象 ...

随机推荐

  1. 【初级坑跳跳跳】[NULLException] findViewById() id 引用错误,导致空指针

    在学习Intent页面切换,几个页面切换,导致view id 写错,写成另一个xml里的id去了,导致空指针异常 setContentView(R.layout.activity_second); B ...

  2. JQ图片跟着鼠标走

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. J - A + B Problem II(第二季水)

    Description I have a very simple problem for you. Given two integers A and B, your job is to calcula ...

  4. C++ 动态绑定

    1.为每一个包含虚函数的类设置一个虚表(VTABLE) 每当创建一个包含有虚函数的类或从包含虚函数的类派生一个类时,编译器就会为这个类创建一个VTABLE.在VTABLE中,编译器放置了这个类中,或者 ...

  5. Java并发编程之volatile变量

    volatile提供了弱同步机制,用来确保将变量更新通知到其它线程.volatile变量不会被缓存在寄存器中或者对其它处理器不可见的地方,因此在读取volatile变量时总会返回最新写入的值.可以想象 ...

  6. windows8开发学习笔记

    XAML行列定义 <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> &l ...

  7. PhpExcel使用方法

    下面是总结的几个使用方法 include 'PHPExcel.php'; include 'PHPExcel/Writer/Excel2007.php'; //或者include 'PHPExcel/ ...

  8. jquery学习之笔记一

    jquery是继prototype后一个很好用的javascript库.jquery是一个轻量级的库,拥有强大的选择器,出色的DOM操作,可靠的事件处理,完善的兼容性和链式操作等功能. window. ...

  9. YouTube视频插入Markdown

    举个例之: 正常YouTube会生成一个<iframe>直接在HTML里面引用即可: <iframe width="420" height="315&q ...

  10. Zend Framework 框架搭建

    通过手工方法搭建Zend Framework的MVC框架结构.首先看一下zend framework mvc的目录结构 1. 在根目录下面创建 public ,并在 public 下创建 index. ...