Javascript this的值

参数this在面向对象的编程中非常重要,他的值取决于调用的模式。在Javascript中一共有4中调用模式:方法调用模式、函数调用模式、构造器调用模式、apply调用模式。这些模式在如何初始化关键参数this上存在差异。

以下代码都是在同一个script中的

方法调用模式:
当一个函数被保存为对象的一个属性时,我们称之为一个方法。当一个方法被调用时,this被绑定到该对象上,如果调用表达式包含一个提取属性的动作,那么他就是被当做一个方法来调用。

var myObject = {
        value : 0 ,
        increment : function (inc) {
            this.value += typeof inc === ‘number‘ ? inc : 1 ;
        }
    };
    myObject.increment();
    console.log(myObject.value);    //1
    myObject.increment(2);
    console.log(myObject.value);    //3

方法可以使用this访问自己所属的对象,所以它能从对象中取值或对对象进行修改,this到对象的绑定发生在调用的时候。这个超级延迟绑定使得函数可以对this高度复用。通过this可取得他们所属对象的上下文的方法称为公共方法。

函数调用模式:
当一个函数并非一个对象的属性时,那么台式被当做一个函数来调用的,以此模式调用函数时,this被绑定到全局对象。这是语言设计上的一个错误。倘若语言设计正确,那么当内部函数被调用时,this应该仍然绑定到外部函数的this变量。这个设计错误的后果就是方法不能利用内部函数来帮助它工作,因为内部函数的this被绑定了错误的值,所以不能共享该方法对对象的访问权。
有一个很容易的解决方案:如果该方法定义一个变量并给他赋值为this,那么内部函数就可以通过那个变量访问到this,将该变量命名为that:

var add = function (a,b) {
        return a+b;
    }
myObject.double = function () {
        var that = this;
        var helper = function () {
            that.value = add(that.value,that.value);
        };
        helper();
    };
    myObject.double();
        console.log(myObject.value);    //6

构造器调用模式:
如果在一个函数前面带上new来调用,那么背地里将会创建一个连接到该函数的prototype成员的新对象,同时this会被绑定到那个新对象上。

    //创建一个名为Que的构造函数。它构造一个带有status属性的对象
        var Quo = function (string) {
            this.status = string;
        }

        //给Que的所有实例提供一个名为get_status的公共方法、

        Quo.prototype.get_status = function () {
            return this.status;
        };

        var myQuo = new Quo("confused");
        console.log(myQuo.get_status());    //confused

一个函数,如果创建的目的就是希望结合new 前缀来调用,那么它就会被称为构造器函数。按照规定,他们保存在以大写格式命名的变量里。如果调用构造器函数时没有在前面加new,可能会发生非常糟糕的事情,既没有编译时的警告,也没有运行时的警告,所以大写约定非常重要。

Apply调用模式:
因为Javascript是一门函数式的面向对象编程语言,所以函数可以拥有方法。

apply方法让我们构建一个参数数组传递给调用函数。它也允许我们选择this的值。apply方法接受两个参数,第一个是要绑定给this的值,第二个就是死一个参数数组。

//构造一个包含两个数字的数组,并将它们相加。
        var array = [3,4];
        var sum = add.apply(null, array);
        console.log(sum);    //7

        //构造一个包含status成员的对象。

        var statusObject = {
            status : ‘A-ok‘
        }

        var status = Quo.prototype.get_status.apply(statusObject);    //这时this绑定statusObject
        console.log(status);    //"A-ok"

以上就是this在这四种模式中的值了。

时间: 2024-12-15 07:01:49

Javascript this的值的相关文章

asp.net后台操作javascript:confirm返回值

在asp.net中使用confirm可以分为两种: 1.没有使用ajax,confirm会引起也面刷新 2.使用了ajax,不会刷新 A.没有使用ajax,可以用StringBuilder来完成. (一)asp.net用StringBuilder控制后台操作javascript:confirm返回值,此方法比较烦琐1.后台启动事件 StringBuilder sb = new StringBuilder();        sb.Append("<script language='java

javascript之布尔值

javascript的布尔值只有两个值,保留字true和false. 任意javascript的值都可以转换为布尔值.下面这些值会转换成false: undefined null 0 -0 NaN ""                   //空字符串 所有其他值,包括所有对象(数组)都会转换成true. 来看一个例子,假设变量o是一个对象或是null,可以通过一条if语句来显式地检测o是否是非null值: if(o !== null) ... 不等操作符"!=="

JavaScript中的值类型和引用类型

先抛出一个题目,阿里的笔试面试题(很基础,但确实是阿里的笔试题) var a = {"x": 1}; var b = a; a.x = 2; a = {"x": 3}; console.log(b.x); 大家觉得最后在控制台输出的结果是多少? 如果你答案是2,那你就没必要接下去看了.如果不是.那你就接着看下去来解决你的疑惑吧! JavaScript中的值类型和引用类型 在javascript里面有两种变量类型,一种是值类型,一种是引用类型. 值类型:数值.布尔型.

JavaScript获取当前值

JavaScript获取当前值 1.说明        获取select下拉框中的选中的值以及文本值 2.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml

JavaScript 对象的值查找

Javascript对象的值查找规则: 查找顺序 该对象本身 该对象构造函数的prototype 该对象构造函数的prototype 的构造函数的prototype,以这样的方式沿原型链条逐级查找, 直至Object的prototype 整个查找链条中都没有找到则返回 undefine 查找过程中一旦找到则返回找到的值 1 Object.prototype.foo = 'bar'; 2 3 function People() {} 4 People.prototype.kind = 'Peopl

什么是JavaScript的原始值?

JavaScript的原始值是指数字.字符串.布尔值.null和undefined. JavaScript的数据类型分为两类:原始类型(primitive type)和对象类型(object type).JavaScript中的原始类型包括数字.字符串和布尔值.对象类型包括对象.数组和函数. JavaScript中有两个特殊的原始值:null(空)和undefined(未定义),它们不是数字.字符串和布尔值.它们通常代表了各自特殊类型的唯一的成员. 原文地址:https://www.cnblog

JavaScript引用类型和值类型

thead>tr>th,.table>tbody>tr>th,.table>tfoot>tr>th,.table>thead>tr>td,.table>tbody>tr>td,.table>tfoot>tr>td{padding:8px;line-height:1.45;vertical-align:top;border-top:1px solid #ddd}.table>thead>tr&g

javascript 实现键值对 &quot;map&quot;

//javascript 没有map,但是有map功能-_-! 自己动手,丰衣足食 (function(){ try{ function Directory(){ this.key = new Array(); this.value = new Array(); } //添加 Directory.prototype.add = function(key,value){ //key是否和已经存在的key重复 for(var i=0;i<this.key.length;i++){ if(this.k

第三章:Javascript类型、值和变量。

计算机程序的运行需要对值(value)比如数字3.14或者文本"hello world"进行操作,在编程语言中,能够表示并操作的值的类型叫做数据类型(type),编程语言最基本的特性就是主持多种数据类型.当程序需要将值保持起来以备将来使用时,便将其赋值给(将值“保存”到)一个变量(variable).变量是一个值的符号名称,可以通过名称获得对值的引用.变量的工作机制是编程语言的令一个基本特性.本章将参照上节帮助理解本章内容,后续将更深入的讲解. javascript的数据分为两类:原始

前端要给力之:语句在JavaScript中的值

文件夹 文件夹 问题是语句有值吗 那么说你骗我咯 有啥米用呢 研究这个是不是闲得那个啥疼 ES5ES6有什么差异呢 结论是ES6是改了规则但更合理 最后不不过if语句 这两天在写语言精髓那本书的第三版,讨论到ES6跟ES5中间对"语句的值"的不同处理.正好Weibo上也有同学对这个问题有兴趣,所以专门整理了这篇. 写博客能够啰嗦点,写书就不行了.所以这篇文章跟书上能看到的还是会不一样的. 问题是:语句有值吗? 非常不幸.我们面临的的确是一门连语句都有值的语言.在JavaScript中.