详解JavaScript原型对象的this指向问题

2022-04-15 0 984
目录
  • 一、this指向
  • 二、修改this指向
    • 1、call()方法
    • 2、apply()方法
  • 总结

    一、this指向

    构造函数中的this 指向实例对象。那么原型对象this的指向呢?

    如下:

    function Student(age,name){
                this.age = age;
                this.name = name;
            }
            var that;
            Student.prototype.score = function(){
                console.log('孩子们成绩都很好!');
                that = this;
            }
            var xl = new Student(18,'小熊');
            xl.score();
            console.log(that === xl);
    

    定义一个全局变量that,在score函数里面给它赋值,让其指向函数里面的this,调用实例对象的score方法,判断that和实例对象是否一致,如果一致,则说明原型对象this的指向是该实例。

    打印结果为:

    详解JavaScript原型对象的this指向问题

    即原型对象里面放的是方法, 这个方法里面的this 指向的是 这个方法的调用者, 也就是这个实例对象。

    二、修改this指向

    1、call()方法

    写一个简单的两数相加的函数。

     function fn(a,b){
               console.log(a+b);
                console.log(this);
    		 }
     fn(1,2)
    

    在函数内部打印this,调用函数,看其this的指向。

    详解JavaScript原型对象的this指向问题

    可知this指向window对象,如果我们想让this指向我们新创建的一个对象,怎么操作呢?

    先定义一个对象,

    o = {};
    

    然后通过call()修改this指向,让其指向新创建的对象o

     o = {
                name: 'xl'
            };
            fn.call(o,1,2);
    

    打印结果为:

    详解JavaScript原型对象的this指向问题

    现在this指向新创建的对象o,即修改成功。

    2、apply()方法

    apply()和call()方法基本相同,这里就不赘述,直接上代码:

     function fn(a,b){
               console.log(a+b);
                console.log(this);
            }
            o = {
                name: 'xl'
            };
            fn.apply(o,[1,2]);
    

    可以发现,这两种方法还是有区别的,即:call()接受的参数必须是连续参数,而apply()方法接收参数的形式是数组参数。

    总结

    本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注NICE源码的更多内容!

    免责声明:
    1、本网站所有发布的源码、软件和资料均为收集各大资源网站整理而来;仅限用于学习和研究目的,您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。 不得使用于非法商业用途,不得违反国家法律。否则后果自负!

    2、本站信息来自网络,版权争议与本站无关。一切关于该资源商业行为与www.niceym.com无关。
    如果您喜欢该程序,请支持正版源码、软件,购买注册,得到更好的正版服务。
    如有侵犯你版权的,请邮件与我们联系处理(邮箱:skknet@qq.com),本站将立即改正。

    NICE源码网 JavaScript 详解JavaScript原型对象的this指向问题 https://www.niceym.com/19934.html