`
bri_robby
  • 浏览: 21891 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

JavaScript中调用一个函数使用new关键字和直接调用的区别

阅读更多
        随着JavaScript的功能不止可以运行在客户端浏览器作为脚本,还是可以运行在服务器端的NodeJs,对于一个程序员,开发人员来说,不管是做前端,还是做后台,js的使用已经成为一个必备的能力,在此讨论一下js中调用一个函数使用new关键字和直接调用的区别,希望能带给新手一些帮助。也希望得到大神的指导。
一  构造器模式:
   先看一下代码:
function Person(name,age){
	this.name=name;
	this.age=age;
}
p1=Person('tom',20);
p2=new Person('mary',21);
console.log(p1);//undefined
console.log(p2);//Person {name: "mary", age: 21}
console.log(typeof p1);//undefined
console.log(typeof p2);//object

为什么会有以上差别呢?请看一下分析:
1.使用new则是将之当做构造函数来调用,会创建一个该类的实例对象,这个对象的type是这个函数名,中间使用this.propertyName=value会对该实例对象的属性赋值,并且无论有没有return,都会返回这个对象。

2.而如果是直接调用就是简单执行里面的代码,不会创建实例对象,this指向的调用环境下的this对象,如果是在全局中直接调用,就是window,没有默认返回值。

p1就是函数Person()执行的返回值,也就是undefined. 在函数执行过程中,属性被加到全局作用域或者Person方法所属的对象上了。执行以下代码,发现属性加在了window上:
console.log(window.name);//tom
console.log(window.age);//20

而p2是Person()的实例,Person {name: "mary", age: 21}

二  工厂模式:
   如果将Person函数构造为以下情况,结果会出现例外情况:
function Person(name,age){
    var obj = new Object();
	obj.name=name;
	obj.age=age;
    return obj;
}
p3=Person('jim',20);
console.log(p3);//Object {name: "jim", age: 20}
console.log(typeof p3);//object

这个就不需要加new,p3是一个Object,不是Person的实例。

Date();不加new返回当前时间,是一个字符串。加new的话,返回当前时间或者把参数格式化得到的时间,是一个Date对象。

String():不加new将参数格式化为字符串,加new则返回的是String对象。案例如下:
var str1=new String("abc");
var str2=String("abc");
console.log(str1);//String {0: "a", 1: "b", 2: "c", length: 3, [[PrimitiveValue]]: "abc"}
console.log(str2);//abc
console.log(typeof str1);//object
console.log(typeof str2);//string
str1.prop = 1;
console.log(str1.prop);//1
str2.prop = 1;
console.log(str2.prop);//undefined

Number类似于String。

总结以上内容有以下两点结论:
1. 直接调用函数的时候它叫“普通函数”,此时用全局对象window做上下文。
2. 用new关键字调用的时候它叫“构造函数”,此时用这个新生的对象做上下文。

限于个人能力,只能总结到这个程度,不喜勿喷!
分享到:
评论

相关推荐

    C#与JAVASCRIPT函数的相互调用 C#调用JAVASCRIPT函数的调用 JAVASCRIPT调用C#函数的调用

    C#与JAVASCRIPT函数的相互调用 C#调用JAVASCRIPT函数的调用 JAVASCRIPT调用C#函数的调用

    javascript调用delphi中的函数

    标题“javascript调用delphi中的函数”涉及到的技术领域是跨语言通信,具体是JavaScript与Delphi之间的交互。这种交互通常发生在Web应用程序与桌面应用程序的集成,或者在浏览器扩展和本地资源之间。以下是对这一...

    JavaScript中函数对象调用模式总结

    这篇博客通过深入分析JavaScript中的函数调用模式,帮助开发者更好地理解和掌握这些概念。 首先,JavaScript是一种动态类型语言,其中函数不仅是一种数据类型,还能够作为值进行传递和存储。这种特性被称为“函数是...

    QT和网页中的JavaScript函数进行相互调用的实现

    - 在QT中定义一个槽函数,例如`handleJsCall`,然后使用`QWebChannel`来创建一个通信通道,让JavaScript可以调用这个槽函数。 - 首先,创建一个继承自`QObject`的C++类,暴露槽函数给JavaScript。比如,创建一个`...

    JavaScript中this关键字使用方法详解

    在JavaScript编程语言中,`this`关键字是一个至关重要的概念,它常常引发初学者的困惑,因为它的值在不同的上下文中可能会有所不同。`this`关键字主要用来引用对象的上下文,或者说是当前执行环境中的对象。在本文中...

    Javascript中调用C++函数

    在JavaScript和C++之间进行交互,特别是在开发浏览器扩展或嵌入式环境时,是一个常见的需求。这通常涉及到在JavaScript中调用C++编写的函数,以利用C++的高性能和低级特性。本文将深入探讨如何实现这一目标,特别是...

    JavaScript函数的调用以及参数传递

    JavaScript 函数调用 JavaScript 函数有 4 种调用方式。...作为一个函数调用 实例 function myFunction(a, b) { return a * b; } myFunction(10, 2); // myFunction(10, 2) 返回 20 以上函数不属于任何对

    Javascript调用C#函数示例程序

    一个在HTML中使用Javascript的window.external调用C#内函数的示例程序。该方法可应用于网页程序开发中的网页-程序沟通,例如用C#的IHTMLWindow2.execScript替换HTML默认Javascript方法使其直接与C#传参、通讯。

    vbscript和javascript互相调用方法

    例如,定义一个VBScript函数`FormatValue`,并在JavaScript中调用它: ```html <!-- VBScript函数 --> Function FormatValue(value) FormatValue = FormatCurrency(value) End Function %> <!-- JavaScript调用...

    在javascript函数中调用com组件的属性和方法

    在JavaScript函数中调用COM组件的属性和方法是指在JavaScript代码中使用COM组件提供的属性和方法来实现各种功能。本文将介绍如何在JavaScript函数中调用COM组件的属性和方法,并提供一个实例演示如何使用COM组件来...

    原生JS封装_new函数实现new关键字的功能

    在JavaScript中,new关键字是一个操作符,用于创建一个新的对象实例。使用new关键字时,JavaScript会进行如下操作: 1. 创建一个全新的空对象。 2. 将这个新对象的原型指向构造函数的prototype属性。 3. 将构造函数...

    JS调用DLL实例2

    在本例中,我们在 `Start()` 函数中调用了 `MessageBox` 函数,以便显示一个消息框。该函数的调用语句为 `MessageBox(0, "API Message Box", "Win32 API", 64)`,其中 `0` 是父窗口的句柄,`"API Message Box"` 是...

    JS 四种函数调用模式

    使用 `new` 关键字调用函数时,会创建一个新的对象实例,并将这个新对象绑定到 `this`。构造函数主要用于初始化新创建的对象。 ```javascript function Person(name) { this.name = name; } let person = new ...

    JavaScript中判断函数是new还是()调用的区别说明

    在JavaScript中,判断函数是通过new运算符创建实例的方式调用,还是通过普通函数调用,通常涉及到几种不同的方法和它们的局限性。下面将详细介绍每种判断方式及其适用场景和潜在问题。 首先,为了区分new调用和普通...

    [removed]new 一个函数和直接调用函数的区别分析

    这篇文章主要探讨了使用new关键字与直接调用函数这两种方式的区别,并通过具体代码示例来展示它们的不同行为和结果。 首先,我们需要了解在JavaScript中,函数可以返回不同类型的值。当一个函数被设计为构造函数...

    深入解析JavaScript编程中的this关键字使用

    在示例代码中,我们看到了两种不同的函数调用方式:直接调用`foo()`和使用`new`关键字`new foo()`。这两种方式中,`this`的指向是不同的。`foo()`在全局作用域中调用,`this`指向`window`;而`new foo()`创建了一个...

    JavaScript实现同时调用多个函数的方法

    本文实例讲述了JavaScript实现同时调用多个函数的方法。分享给大家供大家参考,具体如下: 这里分析JavaScript 同时调用同一网页内的多个函数的实现方法,点击按钮后执行多次函数,比如连续弹出多次窗口。 具体代码...

    使用jsonp调用百度的js实现搜索关键字的智能提

    描述中提到的“百度输入联想”是指百度提供的一个服务,它可以提供基于用户输入的搜索关键字的预测建议。这种服务对于构建一个功能完善的搜索引擎或者具有类似功能的应用来说是必不可少的。 首先,我们需要了解...

    javascript嵌套函数和在函数内调用外部函数的区别分析.docx

    本文将深入探讨JavaScript中两种常见函数使用方式的区别:嵌套函数和在函数内部调用外部函数,并通过具体示例来阐述它们之间的差异。 #### 二、嵌套函数概述 嵌套函数是指在一个函数内部定义另一个函数的情况。...

    JavaScript程序设计课件:函数的调用方式.pptx

    JavaScript程序设计 函数的调用方式 5.2.2 函数的调用方式 概念 当函数定义完成后,要想在程序中发挥函数的作用,必须...call 和 apply 是 Function 的原型方法,它们能够将特定函数当做一个方法绑定到指定对象上,并进

Global site tag (gtag.js) - Google Analytics