影响JavaScript中this指向的几种函数调用方法

Drinkey 发布于2019-08-23 13:04 / 1724人阅读

摘要：前言初学总会对指向感到疑惑，想要深入学习，必须先理清楚和相关的几个概念。中总是指向一个对象，但具体指向谁是在运行时根据函数执行环境动态绑定的，而并非函数被声明时的环境。除去不常用的和的情况，具体到实际应用中，指向大致可以分为以下种。

前言

初学javascript总会对this指向感到疑惑，想要深入学习javascript，必须先理清楚和this相关的几个概念。javascript中this总是指向一个对象，但具体指向谁是在运行时根据函数执行环境动态绑定的，而并非函数被声明时的环境。除去不常用的with和eval的情况，具体到实际应用中，this指向大致可以分为以下4种。

作为对象的方法调用

当函数作为对象的方法被调用时，this指向该对象：

var person = {
  name: "twy",
  getName: function() {
    console.info(this === person);  // 输出true
    console.info(this.name);     // 输出twy
  }
}
person.getName();

作为普通函数调用

当函数作为普通的函数被调用时，非严格模式下this指向全局对象：

function getName(){
  // 非严格模式
  console.info(this === window); // 浏览器环境下输出true
}
getName();

严格模式下this为undefined：

function getName(){
  // 严格模式
  "use strict"
  console.info(this === window); // 输出false
}
getName();

构造器调用

当new一个对象时，构造器里的this指向new出来的这个对象：

function person(){
  // 构造函数
  this.color = "white";
}
var boy = new person();
console.info(boy.color);  // 输出white

call或apply调用

用 Function.prototype.apply 或 Function.prototype.call 可以动态改变传入函数的this指向：

// 声明一个父亲对象，getName方法返回父亲的名字
var father = {
  name: "twy",
  getName: function(){
    return this.name;
  }
}
// 生命一个儿子对象，但是没有返回名字的功能
var child = {
  name: "chy"
}
console.info(father.getName()); // 输出twy

// 使用call或apply将father.getName函数里this指向child
console.info(father.getName.call(child)); // 输出chy
console.info(father.getName.apply(child)); // 输出chy

下一篇文章我将重点介绍call和apply。

最后

将this理解透彻，是一个jser必须要做的事情。

云服务器 GPU云服务器 js缓存的几种方法 javascript中this详解最基本的几种 html的几种轮播

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99199.html

javascript 面向对象(实现继承的几种方式)

摘要：老明调用了从原型中继承来的方法继承到了当前对象的原型中调用了从原型中扩展来的方法构造继承基本思想借用构造函数的基本思想就是利用或者把父类中通过指定的属性和方法复制借用到子类创建的实例中。 1、原型链继承核心：将父类的实例作为子类的原型缺点：父类新增原型方法/原型属性，子类都能访问到，父类一变其它的都变了 function Person (name) { ...

liujs 2019-08-23 16:41 评论0 收藏0
JavaScript继承的几种方式

摘要：组合方式继承终极版工商建设开心能分清是孩子还是父辈二狗的构造函数已指向图示关键代码创建对象的方法就是用原型链来连接的。也让二狗有了确定的归属。一、继承原理原型链不知道什么是原型链？来读几个关键词：哥欧构构造函数构造函数构造函数实例实例实例原型对象原型对象原型对象 prototype prototype prototype __proto__ __pro...

SegmentFault 2019-08-22 18:02 评论0 收藏0
JavaScript 严格模式下this的几种指向

摘要：前言曾经被中的弄晕了，今天整理总结一下在严格模式下的几种指向。严格模式构造函数中的事件处理函数中的在严格模式下，在事件处理函数中，指向触发事件的目标对象。前言曾经被 JavaScript 中的 this 弄晕了，今天整理总结一下在严格模式下 this 的几种指向。 1. 全局作用域中的this 在严格模式下，在全局作用域中，this指向window对象 use stric...

smallStone 2019-08-21 15:59 评论0 收藏0
关于JavaScript函数调用的几种模式

摘要：函数的调用有五种模式方法调用模式，函数调用模式，构造器调用模式，调用模式以及回调模式，下面分别对这几种模式进行说明。构造器调用模式构造函数的调用方式被称为构造器调用模式，这是模拟类继承式语言的一种调用方式。函数的调用有五种模式：方法调用模式，函数调用模式，构造器调用模式，apply/call调用模式以及回调模式，下面分别对这几种模式进行说明。 1.函数调用与方法调用模式： 1.1 声...

邹强 2019-08-23 13:45 评论0 收藏0
JavaScript知识点总结

摘要：参与任何数值计算的结构都是，而且。。面向人类的理性事物，而不是机器信号。达到无刷新效果。的工作原理总是指向一个对象，具体是运行时基于函数的执行环境动态绑定的，而非函数被声明时的环境。原型对象上有一个属性，该属性指向的就是构造函数。 1.JS面向对象的理解面向对象的三大特点：继承、封装、多态 1、JS中通过prototype实现原型继承 2、JS对象可以通过对象冒充，实现多重继承， 3...

sean 2019-08-22 13:51 评论0 收藏0