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

目录
  • 一、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的指向是该实例。

打印结果为：

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

二、修改this指向

1、call()方法

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

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

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

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

先定义一个对象，

o = {};

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

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

打印结果为：

现在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()方法接收参数的形式是数组参数。

总结

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

赞 (0)

相关推荐

  • JavaScript基础之this指向

    JavaScript基础之this指向

    目录 this 方法中 对象中 隐藏的this 严格模式 总结 JavaScript中this也是一件很神奇 事情,在面向对象(比如java)中表示一个当前的对象引用,但是在JavaScript中this不是固定不变的,而是随着运行环境的改变而改变. this 老规矩先看代码: 方法中 function test(){ console.log(this); } 对象中 function test(){ console.log(this); } 在方法中,this表示该方法所属的对象.因为第一个是

  • Javascript中函数分类&this指向的实例详解

    Javascript中函数分类&this指向的实例详解

    JS中定义函数的三种方式 通过实例来说明吧 <script> //method1 function fn() { console.log('fn created '); } //method2 var fn2 = function () { console.log('fn2 created'); } //method3 var fn3 = new Function('test', 'console.log(test);'); fn3('fn3 test'); console.dir(fn3);

  • JS 箭头函数的this指向详解

    箭头函数是ES6中的新增特性,他没有自己的this,其this指向从外层代码库继承. 使用箭头函数时要注意一下几点: 箭头函数不能用作构造函数,用的话会抛出一个错误 无法使用arguments参数,如果要用的话就用rest 无法使用yield命令,所以箭头函数无法用作Generator函数 因为没有自己的this,所以没法通过bind.call.apply来改变this指向 但是这不代表箭头函数的this指向是静态的,我们可以通过改变它外层代码库的this指向来控制 箭头函数的this从外层代码

  • JavaScript 中this指向问题案例详解

    总结 全局环境 ➡️ window 普通函数 ➡️ window 或 undefined 构造函数 ➡️ 构造出来的实例 箭头函数 ➡️ 定义时外层作用域中的 this 对象的方法 ➡️ 该对象 call().apply().bind() ➡️ 第一个参数 全局环境 无论是否在严格模式下,this 均指向 window 对象. console.log(this === window) // true // 严格模式 'use strict' console.log(this === window

  • JavaScript中的this指向和自定义属性详解

    目录 1.this关键字 2.自定义属性 3.综合案例1:tab选项卡的实现 附录 总结 1.this关键字 this指向的是当前元素 全局函数中的this指向window对象 代码中声明了一个全局函数,是属于浏览器窗口对象的,所以this表示的就是浏览器窗口对象window function fn() { consolo.log(this); } fn() 标签事件属性中的this指向window对象 如果将一个全局函数在一个标签属性中调用,如下: <button onclick="fn

  • JavaScript函数中this指向问题详解

    this关键字 哪个对象调用函数,函数里面的this指向哪个对象. **严格模式下:**在全局环境中,this指向的是undefined **非严格模式下:**在全局环境中,this指向的是window 全局定义的函数直接调用,this => window function fn(){ console.log(this); // 此时 this 指向 window } fn(); // 相当于 window.fn() 对象内部的函数调用,this => 调用者 var obj = { fn:f

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

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

    目录 一.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; } v

  • 详解JavaScript原型与原型链

    正如一些面向对象语言中所实现的那样,在JavaScript中我们有时也需要创建一个拥有公共函数与属性的类作为父类来减少代码重复.实现类型检查与实现更加清晰地代码结构.在JavaScript中,继承是通过原型链实现的.了解JavaScript的继承与原型链之前首先需要了解JavaScript中对象创建的方式. 在JavaScript中创建对象 JavaScript中对象创建的方式有两种:工厂方法(Factory Functions).构造器方法(Constructor Functions) . 工

  • 详解JavaScript RegExp对象

    什么是 RegExp? 正则表达式描述了字符的模式对象. 当您检索某个文本时,可以使用一种模式来描述要检索的内容.RegExp 就是这种模式. 简单的模式可以是一个单独的字符. 更复杂的模式包括了更多的字符,并可用于解析.格式检查.替换等等. 您可以规定字符串中的检索位置,以及要检索的字符类型,等等. RegExp对象是原生JavaScript中表示正则表达式的对象. 创建对象的方法为:var RegExp = new RegExp(pattern, attributes); 参数pattern

  • 详解JavaScript函数对象

    函数 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块. function One(leve , leve){ //code return leve+leve } 注释: 形参不需要加上类型: return语句为可选,没有return语句的函数返回undefined: 局部变量与全局变量 在函数内声明:局部变量 在函数外声明:全局变量 向一个新变量名赋值时并没有使用var:这个变量会变为新的全局变量 函数可以作为值 形式1: function init(){ alert("One&qu

  • JavaScript原型对象、构造函数和实例对象功能与用法详解

    JavaScript原型对象、构造函数和实例对象功能与用法详解

    本文实例讲述了JavaScript原型对象.构造函数和实例对象功能与用法.分享给大家供大家参考,具体如下: 大家都知道,javascript中其实并没有类的概念.但是,用构造函数跟原型对象却可以模拟类的实现.在这里,就先很不严谨的使用类这个词,以方便说明. 下面整理了一些关于javascript的构造函数.原型对象以及实例对象的笔记,有错误的地方,望指正. 先用一张图简单的概括下这几者之间的关系,再细化: 构造函数和实例对象 构造函数是类的外在表现,构造函数的名字通常用作类名. 其实构造函数也就

  • js对象实例详解(JavaScript对象深度剖析,深度理解js对象)

    js对象实例详解(JavaScript对象深度剖析,深度理解js对象)

    这算是酝酿很久的一篇文章了. JavaScript作为一个基于对象(没有类的概念)的语言,从入门到精通到放弃一直会被对象这个问题围绕. 平时发的文章基本都是开发中遇到的问题和对最佳解决方案的探讨,终于忍不住要写一篇基础概念类的文章了. 本文探讨以下问题,在座的朋友各取所需,欢迎批评指正: 1.创建对象 2.__proto__与prototype 3.继承与原型链 4.对象的深度克隆 5.一些Object的方法与需要注意的点 6.ES6新增特性 下面反复提到实例对象和原型对象,通过构造函数 new

  • 详解JavaScript的this指向和绑定

    注意: 本文属于基础篇,请大神绕路.如果你不够了解,或者了解的还不完整,那么可以通过本文来复习一下. this 指向的类型 刚开始学习 JavaScript 的时候,this 总是最能让人迷惑,下面我们一起看一下在 JavaScript 中应该如何确定 this 的指向. this 是在函数被调用时确定的,它的指向完全取决于函数调用的地方,而不是它被声明的地方(除箭头函数外).当一个函数被调用时,会创建一个执行上下文,它包含函数在哪里被调用(调用栈).函数的调用方式.传入的参数等信息,this

  • 详解 javascript对象创建模式

    详解 javascript对象创建模式

    创建模式 在javascript中,主要有以下几种创建模式: 工厂模式 构造函数模式 原型模式 组合模式 动态原型模式 寄生构造函数模式 稳妥构造模式 工厂模式 工厂模式是软件工程领域一种广为人知的设计模式.javascript实现方式: function createPerson(name, obj, job) { var o = new Object(); o.name = name; o.obj = obj; o.job = job; o.sayName = function() { al

  • 详解JavaScript中的this指向问题

    题记 JS中的this指向一直是个让初学者头疼的问题.今天,我们就一起来瞅瞅this倒地是咋回事,详细说说this指向原则,从此不再为了this指向操碎了心. 开篇 首先我们都知道this是Javascript语言的一个关键字. 它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用.随着函数使用场合的不同,this的值会发生变化.但是有一个总的原则,那就是this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它所在函

  • 详解JavaScript面向对象实战之封装拖拽对象

    详解JavaScript面向对象实战之封装拖拽对象

    目录 概述 1.如何让一个DOM元素动起来 2.如何获取当前浏览器支持的transform兼容写法 3.如何获取元素的初始位置 5.我们需要用到哪些事件? 6.拖拽的原理 7. 我又来推荐思维导图辅助写代码了 8.代码实现 part1.准备工作 part2.功能函数 part3.声明三个事件的回调函数 9.封装拖拽对象 概述 为了能够帮助大家了解更多的方式与进行对比,我会使用三种不同的方式来实现拖拽. 不封装对象直接实现: 利用原生JavaScript封装拖拽对象: 通过扩展jQuery来实现拖

随机推荐