JavaScript 再认识(一):Function调用模式对this的影响

近来,学习了一下《JavaScript精粹》,读到了函数这章,理清了JavaScript中this在不同调用模式下的指向。

1、Function调用模式:Function是JavaScript的一种引用类型,拥有四种调用模式:方法调用模式,函数调用模式,构造器调用模式,apply(call)调用模式

2、Function的不同调用模式对this产生不同的影响:

(1)方法调用模式:Function作为对象的方法被调用。此时,this指向调用Function的对象。

1 var obj = {
2    name: "lucy",
3    printName: function( ) {
4        console.log( this.name );  // 此时printName,作为obj的方法被调用,this指向调用printName的obj,this.name === "lucy"。
5    }
6 };

(2)构造器调用模式:Function作为构造器被调用,亦即使用new操作符,创建新的对象实例,将新的对象连接到该函数的prototype上,并且将this指向新创建的对象实例;同时,执行构造器内的代码为新的对象实例添加成员,最后返回这个新的对象实例。

 1 // 创建构造器Demo,在Demo被new操作符调用时,this指向Demo的prototype。
 2 var Demo = function( ){
 3    this.name = "jack";
 4 };
 5
 6 // 在Demo的prototype中,添加方法printName。
 7 Demo.prototype.printName = function( ){
 8    concole.log(this.name);
 9 };
10
11 // 创建Demo实例,此时this已经指向Demo的prototype
12 var d = new Demo( );
13 console.log(d.name);      // 在控制台输出"jack"
14 d.printName( );           // 在控制台输出"jack"  

PS:构造函数、构造器只是在英译中的过程中的翻译用词差异,在英文都是constructor。《JavaScript精粹》译为构造器,《JavaScript高级程序设计》第三版译为构造函数。

(3)apply(call)调用模式:JavaScript中,函数也是对象而具有方法,其具有方法apply。apply接受两个参数,第一个是要传递给this的值,第二个是参数数组。当函数调用apply方法时,将函数内部的this指向apply传递的第一个参数。

 1 var people = {
 2     this.name = "lily";
 3 }
 4
 5 var printName = function( ){
 6     console.log(this.name)
 7 }
 8
 9 //  此时apply将this指向了people
10 printName.apply(people)     // 在控制台输出 lily

PS:《JavaScript精粹》中只提及apply。apply和call在功能上是相同的,但是具体的使用方式上,有小差异。

(4)函数调用模式:既不是作为方法调用,也不是调用自己的apply(call),也不是作为构造器被new调用,这时候调用就是函数调用模式。此时函数内部的this指向全局变量,在浏览器中指的是window变量,在node.js中指的是global变量。

1 window.name = "bob";
2
3 // 此时this指向window
4 var printName = function( ) {
5     console.log( this.name );
6 };
7
8 console.log(window.name)    // 在控制台输出bob
9 printName()                           // 在控制台输出bob

3、小结:

(1)方法调用模式:this指向调用方法的对象。

(2)构造器调用模式:this指向构造器的prototype。

(3)apply调用模式:this指向apply传入的第一个对象。

(4)函数调用模式:this指向全局对象window。

时间: 2025-01-01 21:02:11

JavaScript 再认识(一):Function调用模式对this的影响的相关文章

JavaScript的4种this调用模式

方法调用模式:函数调用模式:构造器调用模式:apply调用模式: 方法调用模式: 当一个函数被保存为对象的一个属性时,我们称它为一个方法.当一个方法被调用时,this被绑定到该对象. 函数调用模式: 以此模式调用函数时,this被绑定到全局对象.使用that方式解决: var add = function(a,b){return a+b;} var myObj = {}; myObj.double = function(){ var that = this; var helper = funct

JavaScript函数的调用模式有哪些?

函数是JavaScript 世界里的第一公民,换句话来说,就是我们如果可以精通 JavaScript 函数的使用,那么对JavaScript 的运用可以更游刃有余了.熟悉 JavaScript 的人应该都知道,同样的函数,以不同的方式调用的话,受影响最大的应该是  this  .下面我们来说说 JavaScript 函数的各种调用模式,希望对大家 学习javascript有所帮助. 一.普通函数的调用模式 所谓普通函数的调用模式,也是JavaScript 函数的最简单的一种调用模式,直接就是函数

JavaScript函数的各种调用模式

函数是JavaScript世界里的第一公民,换句话来说,就是我们如果可以精通JavaScript函数的使用,那么对JavaScript的运用可以更游刃有余了.熟悉JavaScript的人应该都知道,同样的函数,以不同的方式调用的话,受影响最大的应该是  this .下面我们来说说JavaScript函数的各种调用模式. 一.普通函数的调用模式 所谓普通函数的调用模式,也是JavaScript函数的最简单的一种调用模式,直接就是函数名后接一个  ()  实现调用,看下面代码: function f

js中this的四种调用模式

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <ti

JavaScript中函数的四种调用模式

理解函数的四种调用方法,可以有效的帮助我们分析和理解JavaScript代码.但是经常有人分不清楚或者不理解这四种调用模式,在JavaScript中,函数是一等公民,函数在JavaScript中是一个数据类型,而非像C#或其他描述性语言那样仅仅作为一个模块来使用.函数有四种调用模式,分别是:1.函数调用形式 2.方法调用形式 3.构造器调用形式 4.上下文调用形式(apply,call)这里所有的调用模式中,最主要的区别在于关键字 this 的意义.下面分别介绍这几种调用形式. 一.函数调用形式

JavaScript (JS) 函数补充 (含arguments、eval()、四种调用模式)

1. 程序异常 ① try-catch语法    测试异常 try-catch语法代码如下: try { 异常代码;     try中可以承重异常代码, console.log("try")  出现异常代码后,正确代码不会执行 } catch (e) { console.log("e:"+e);  try中出现异常在e中展现出来 console.log("catch");  只有try中出现异常才执行这段代码 } finally { consol

JavaScript 方法调用模式和函数调用模式

这两天在读<JavaScript语言精粹>关于第4章函数调用的几种模式琢磨了半天. 这里就说一下方法调用模式跟函数调用模式. 方法调用模式: 当一个函数被保存为对象的一个属性时,我们称它为一个方法.当一个方法被调用时,this被绑定到该对象.如果调用表达式包含一个提取属性的动作(a.name或a[name]),那么他就是被当做一个方法调用. 1 var myObject = { 2 value:1, 3 double:function(){ //double是myObject对象的一个方法 4

Effective JavaScript Item 18 理解Function, Method, Constructor调用之间的区别

本系列作为Effective JavaScript的读书笔记. Function绝对是JavaScript中的重中之重.在JavaScript中,Function承担了procedures, methods, constructors甚至是classes以及modules的功能. 在面向对象程序设计中,functions,methods以及class constructor往往是三件不同的事情,由不同的语法来实现.但是在JavaScript中,这三个概念都由function来实现,通过三种不同的

javascript中函数的四种调用模式详解

介绍函数四种调用模式前,我们先来了解一下函数和方法的概念,其实函数和方法本质是一样,就是称呼不一样而已.函数:如果一个函数与任何对象关系,就称该函数为函数.方法:如果一个函数作为一个对象属性存在,我们就称之为方法.接下来就可以开始今天的主体. 1.函数调用模式. 就是通过函数来调用,规范写法为:function fn(){} fn(); 函数中this的指向->window.案例如下: var age = 38; var obj = { age: 18, getAge: function() {