美文网首页
js中的this的调用(学习阮一峰老师)

js中的this的调用(学习阮一峰老师)

作者: _李雷 | 来源:发表于2017-02-07 22:34 被阅读0次

JavaScript中this对象

  在js的函数中经常看到如下语句,不明白有什么作用。

function  person(name){

        this.name=name;

}

this对象是谁取决于函数被调用的方式,在JavaScript中,函数具有四种调用方式:

一、直接调用,此时函数中的this在ES3/ES5非严格模式下为全局对象,在浏览器中即为window

var x=1;

function test(){

        alert(this.x); 此时this为window

}

test(); //结果为1

二、某个对象的方法调用,这时this指这个上级对象

function test(){

        alert(this.x); //此时this指o

}

var o={};

o.x=1;

o.m=test;

o.m(); //输出为1

三、作为构造函数调用

  所谓构造函数,实际上就是通过这个函数生成一个新的对象,此时this就是指这个新对象

function test(){

     this.x=1;  //this为o

}
var o=new test();
alert(o.x); //输出为1

  为了表明this不是全局对象,对代码做如下调整:

var x=2;

function test(){

       this.x=1;

}

var o = new test();

alert(x); //结果为2,表面全局变量的x根本没有变

四、apply调用

  apply()是函数对象的一个方法,它的作用是改变函数的调用对象,它的第一个参数就表示改变后的调用这个函数的对象,因此this指的就是这个第一个参数

var x=0;

function test(){

       alert(this.x);

}

var o = {};

o.x = 1;

o.m = test;

o.m.apply(); //结果为0

   apply()参数为空时,默认调用全局对象,所以这时的运行结果为0,此时,this为全局对象,如果最后一行改为

o.m.apply(o);  //结果为1

相关文章

  • js中的this的调用(学习阮一峰老师)

    JavaScript中this对象 在js的函数中经常看到如下语句,不明白有什么作用。 function per...

  • 学习资料

    js相关 阮一峰JS教程 阮一峰es6教程 JS原型与闭包 正则表达式 canvas学习 插件库相关 babel ...

  • 2019-05-20周结

    1 js理论:js理论的学习主要结合的是廖雪峰老师和阮一峰老师的网上的教程以及mdn 和你不知道的js一书:这周主...

  • CSS中flex布局

    学习阮一峰老师的博客后自我总结。阮一峰老师博客链接http://www.ruanyifeng.com/blog/2...

  • 前端学习资料整理

    JS教程 阮一峰JS教程廖雪峰JS教程MDN JS教程阮一峰ES6教程 Node 从零开始nodejs系列文章Ko...

  • 2017-02-26

    使用构造函数封装TAB 效果预览 js中的this 本篇文章是读阮一峰的《JavaScript标准参考教程》的学习...

  • webpack入门学习笔记

    学习资源————阮一峰 webpack-demos webpack命令 根据webpack.config.js文件...

  • 前端网站导航

    js学习 1.JavaScript 标准参考教程(alpha)-- 阮一峰2.廖雪峰的官方网站 -- js教程 字...

  • 阮一峰js

    阮一峰

  • js 构造函数继承

    //js对象的继承 参考来源:阮一峰博客

网友评论

      本文标题:js中的this的调用(学习阮一峰老师)

      本文链接:https://www.haomeiwen.com/subject/qowmittx.html