深入理解js中this的用法

this是js的一个关键字，随着函数使用场合不同，this的值会发生变化。但是总有一个原则，那就是this指的是调用函数的那个对象。

1、纯粹函数调用。

function test() {
  this.x = 1;
  alert(x);
}

test();

其实这里的this就是全局变量。看下面的例子就能很好的理解其实this就是全局对象Global。其实这里的this就是全局变量。看下面的例子就能很好的理解其实this就是全局对象Global。

var x = 1;
function test() {
  alert(this.x);
}
test();//1

var x = 1;
function test() {
  this.x = 0;
}
test();
alert(x);//0

2、作为方法调用，那么this就是指这个上级对象。

function test() {
  alert(this.x);
}

var o = {};
o.x = 1;
o.m = test;
o.m(); //1

3、作为构造函数调用。所谓构造函数，就是生成一个新的对象。这时，这个this就是指这个对象。

function test() {
   this.x = 1;
}
var o = new test();
alert(o.x);//1

4、apply调用

var x = 0;
function test() {
  alert(this.x);
}

var o = {};
o.x = 1;
o.m = test;
o.m.apply(); //0
o.m.apply(o);//1

当apply没有参数时，表示为全局对象。所以值为0。

以上这篇深入理解js中this的用法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JS中的this变量的使用介绍

    JavaScript中this的使用 在JavaScript中this变量是一个令人难以摸清的关键字,this可谓是非常强大,充分了解this的相关知识有助于我们在编写面向对象的JavaScript程序时能够游刃有余. 对于this变量最要的是能够理清this所引用的对象到底是哪一个,也许很多资料上都有自己的解释,但有些概念讲的偏繁杂.而我的理解是:首先分析this所在的函数是当做哪个对象的方法调用的,则该对象就是this所引用的对象. 示例一. 复制代码 代码如下: var obj = {};

  • JavaScript中apply与call的用法意义及区别说明

    apply和call,它们的作用都是将函数绑定到另外一个对象上去运行,两者仅在定义参数的方式有所区别: Function.prototype.apply(thisArg,argArray); Function.prototype.call(thisArg[,arg1[,arg2-]]); 从函数原型可以看到,第一个参数都被取名为thisArg,即所有函数内部的this指针都会被赋值为thisArg,这就实现了将函数作为另外一个对象的方法运行的目的.两个方法除了thisArg参数,都是为Funct

  • js中typeof的用法汇总

    JavaScript中的typeof其实非常复杂,它可以用来做很多事情,但同时也有很多怪异的表现.本文列举出了它的多个用法,而且还指出了存在的问题以及解决办法. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof?redirectlocale=en-US&redirectslug=JavaScript%2FReference%2FOperators%2Ftypeof > type

  • js中substring和substr两者区别和使用方法

    js中substring和substr两者区别和使用方法

    在开始之前,先回顾下js中下标(数组元素/字符串中字符下标): 下标总是从0开始计数,例如 var arr = [1,2,3];//数组的长度为3,元素下标依次为:0,1,2 arr[0] = 1,arr[1]=2.. 字符串类似:如var s = "hello"://字符串长度为5,第一个字符'h'的下标为0,依次类推 String.substring( ):用于返回一个字符串的子串 用法如下:string.substring(from, to) 其中from指代要抽去的子串第一个字

  • 浅谈JS中的!=、== 、!==、===的用法和区别

    var num = 1; var str = '1'; var test = 1; test == num //true 相同类型 相同值 test === num //true 相同类型 相同值 test !== num //false test与num类型相同,其值也相同, 非运算肯定是false num == str //true 把str转换为数字,检查其是否相等. num != str //false == 的 非运算 num === str //false 类型不同,直接返回fals

  • 深入理解js中this的用法

    this是js的一个关键字,随着函数使用场合不同,this的值会发生变化.但是总有一个原则,那就是this指的是调用函数的那个对象. 1.纯粹函数调用. function test() { this.x = 1; alert(x); } test(); 其实这里的this就是全局变量.看下面的例子就能很好的理解其实this就是全局对象Global.其实这里的this就是全局变量.看下面的例子就能很好的理解其实this就是全局对象Global. var x = 1; function test()

  • 深入理解JS中的substr和substring

    substr 方法 返回一个从指定位置开始的指定长度的子字符串. stringvar.substr(start [, length ]) 参数 stringvar 必选项.要提取子字符串的字符串文字或 String 对象. start 必选项.所需的子字符串的起始位置.字符串中的第一个字符的索引为 0. length 可选项.在返回的子字符串中应包括的字符个数. 说明 如果 length 为 0 或负数,将返回一个空字符串.如果没有指定该参数,则子字符串将延续到 stringvar 的最后. 示

  • JS中prototype的用法实例分析

    本文实例讲述了JS中prototype的用法.分享给大家供大家参考.具体分析如下: JS中的phototype是JS中比较难理解的一个部分   本文基于下面几个知识点:   1 原型法设计模式 在.Net中可以使用clone()来实现原型法 原型法的主要思想是,现在有1个类A,我想要创建一个类B,这个类是以A为原型的,并且能进行扩展.我们称B的原型为A.   2 javascript的方法可以分为三类: a 类方法 b 对象方法 c 原型方法 例子如下: function People(name

  • js中this的用法实例分析

    本文实例分析了js中this的用法.分享给大家供大家参考.具体分析如下: 实例1:第一种调用this的方法--以函数形式调用.它代表全局对象window 复制代码 代码如下: <script type="text/javascript"> function t(){  alert(this);//这里this表示window对象. } t(); </script> 实例2:第二种调用this的方法--以对象属性的形式调用.它代表该对象.实例中onclick为p元

  • 实例讲解JS中setTimeout()的用法

    实例讲解JS中setTimeout()的用法

    本文实例讲解了JS中setTimeout()的用法,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <script type="text/javascript"&

  • JS中Attr的用法详解

    具体代码如下所示: <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#btn").click(function(){ //使用attr(name)获取属性值: alert(

  • 浅谈Vue.js中ref ($refs)用法举例总结

    本文介绍了Vue.js中ref ($refs)用法举例总结,分享给大家,具体如下: 看Vue.js文档中的ref部分,自己总结了下ref的使用方法以便后面查阅. 一.ref使用在外面的组件上 HTML 部分 <div id="ref-outside-component" v-on:click="consoleRef"> <component-father ref="outsideComponentRef"> </co

  • 深入理解JS中Number()，parseInt()，parseFloat()三者比较

    参考阅读: 详解js中Number().parseInt()和parseFloat()的区别 详解JS转换数值函数Number().parseInt().parseFloat() 在项目开发中我们经常会用到转型方法,尤其是JS这种松散型的语言.其中比较常用的方法就是Number()方法和ParseInt()/ParseFloat()方法了,下面我们分别对这几种方法的转型机制进行详细地说明.具体内容详情如下所示: [正文内容] Number() --------------------------

  • 深入理解 ES6中的 Reflect用法

    Reflect对象是一个全局的普通的对象.Reflect的原型就是Object. 我们首先来验证下 看看Reflect的原型是否是Object, 基本代码如下: let obj = {}; console.log(Reflect.__proto__ === Object.prototype); // true console.log(obj.__proto__ === Reflect.__proto__); // true let str = '111'; console.log(str.__p

  • 深入理解JS中attribute和property的区别

    深入理解JS中attribute和property的区别

    目录 attribute和property介绍 “脚踏两只船” attribute和property的取值和赋值 1.attribute取值 2.attribute赋值 3.property取值 4.Property赋值 更改property和attribute其中一个值,会出现什么结果 property 和 attribute非常容易混淆,两个单词的中文翻译也都非常相近(property:属性,attribute:特性),但实际上,二者是不同的东西,属于不同的范畴. property是DOM中

随机推荐