`

JS中踩过的坑(1) ----new 操作符的使用

 
阅读更多

        按照javascript语言精粹中所说,如果在一个函数前面带上new来调用该函数,那么将创建一个隐藏连接到该函数的prototype成员的新对象,同时this将被绑定到那个新对象上。这个话很抽象,我想用实例来让自己加深理解。

1.如果就一个函数,没有返回值,没有prototype成员,然后使用new,会是什么结果呢?如果一个函数没有返回值,那么如果不使用new来创建变量,那么该变量的值为undefined.如果用了new,那么就是Object.说明一个函数的默认的Prototype是Object.  原文:http://www.cnblogs.com/RitaRichard/archive/2011/10/12/2208902.html

function Test1(str) {
    this.a = str;
}
var myTest = new Test1("test1");
alert(myTest); //[object Object]
function Test1WithoutNew(str) {
    this.a = str;
}
var myTestWithoutNew = Test1WithoutNew("test1");
alert(myTestWithoutNew); //undefined;

2.如果函数有返回值,但是返回值是基本类型。那么new出来的myTest还是object.因为基本类型的prototype还是Object. 而如果不使用new,那么返回值就是string的值。

function Test1(str) {
    this.a = str;
    return this.a;
}
var myTest = new Test1("test1");
alert(myTest); //Object

function Test1WithoutNew(str) {
    this.a = str;
    return this.a;
}
var myTestWithoutNew = Test1WithoutNew("test1");
alert(myTestWithoutNew); //"test1"

3。如果函数的返回值为new出来的对象,那么myTest的值根据new出来的对象的prototype而定。

function Test1(str) {
    this.a = str;
    return new String(this.a);
}
var myTest = new Test1("test1");
alert(myTest); //String "test1"

4。接下来我们开始讨论new中的this。如果我们给Test1的prototype中加入一个方法叫get_string(),那么get_string()中的this指的就是这个新对象。能够得到在new时候赋予该对象的属性值。

var Test2 = function(str) {
    this.a = str;
}

Test2.prototype.get_string = function () {
    return this.a;
};

var myTest2 = new Test2("test2");
alert(myTest2.get_string()); //“test2”

var Test2 = function(str) {
    this.a = str;
}

Test2.prototype.get_string = function () {
    return this.a;
};

var myTest2 = Test2("test2");
alert(myTest2)//undefined

5。如果我们修改了函数的prototype,又会发生什么样的情况呢? 那么就会发生类似继承的功能,其实就是js的伪类实现。

function Test1(str) {
    this.b = str;
}
Test1.prototype.Get_Test1String = function () {
    return this.b;
};

var Test2 = function(str) {
    this.a = str;
}
Test2.prototype = new Test1("test1");
Test2.prototype.get_string = function () {
    return this.a;
};

var myTest2 = new Test2("test2");
alert(myTest2); //Object
alert(myTest2.get_string()); //"test2"
alert(myTest2.Get_Test1String()); //"test1"
分享到:
评论

相关推荐

    JavaScript中的比较操作符>、<、>=、<=介绍

    在JavaScript编程语言中,比较操作符是比较两个变量或表达式的值并返回一个布尔值(true或false)的运算符。JavaScript中常用的比较操作符包括大于(>)、小于(<)、大于等于(>=)、小于等于()。这些操作符可以...

    js代码-new操作符

    在JavaScript中,`new`操作符是一个至关重要的概念,它用于创建对象实例。当我们使用`new`关键字调用一个函数时,实际上是在执行一个构造函数,这个构造函数会返回一个新的对象实例。理解`new`操作符的工作原理对于...

    【JavaScript源代码】JavaScript中new操作符的原理示例详解.docx

    在JavaScript中,`new`操作符是一个至关重要的概念,它用于通过构造函数创建新的对象实例。构造函数是一种特殊类型的函数,通常用来初始化新创建的对象。接下来我们将深入探讨`new`操作符的工作原理,并通过示例进行...

    详解JavaScript中new操作符的解析和实现

    在JavaScript中,`new`操作符是一个至关重要的构造机制,它用于创建对象实例并初始化这些实例。当我们使用`new`操作符调用一个函数时,实际上是在执行一系列步骤来构建一个新对象并设置其属性和方法。以下是`new`...

    js代码-手动实现 new 操作符

    在JavaScript中,`new`操作符是一个至关重要的概念,它用于创建对象实例并执行构造函数。手动实现`new`操作符的过程,可以帮助我们更深入地理解JavaScript中的对象创建机制。以下将详细介绍`new`操作符的工作原理...

    JavaScript 10分钟速成 (js-in-ten-minutes)

    - **`typeof`操作符**:使用`typeof`操作符时要小心,它可能会返回意料之外的结果。 - **`instanceof`操作符**:使用`instanceof`时也要注意,因为它的结果可能受到原型链的影响。 #### 原型 JavaScript中的原型是...

    面试第二题 new 操作符 具体干了什么?

    JavaScript new操作符具体干了什么呢? 在javascript 只要new 一个函数,就可以new一个对象,这应该算是JavaScript中函数式编程思想,这里主要说明的是 在new的过程中发生了什么? 1.具体主要有4个部分: 1.创建了一...

    js中的instanceof操作符1

    `instanceof`是JavaScript中的一个操作符,用于检查一个对象是否是特定构造函数的实例,或者更具体地说,是检查该对象的原型链上是否存在指定构造函数的`prototype`。这个操作符对于理解和处理对象继承关系非常关键...

    用方法封装javascript的new操作符(一)

    然而,这种做法通常不建议在生产环境中使用,因为标准的`new`操作符已经足够强大,而且自定义实现可能引入额外的复杂性和潜在的错误。在实际开发中,优先选择使用原生的JavaScript特性来实现面向对象编程,如使用类...

    JavaScript展开操作符(Spread operator)详解.docx

    JavaScript的展开操作符,也称为散列操作符或三点运算符(...),是一个非常强大的工具,它在ES6(ECMAScript 2015)中被引入,极大地提升了编程的灵活性。展开操作符主要应用于以下几个方面: 1. **数组操作**: ...

    js中new一个对象的过程

    使用new操作符和构造函数是JavaScript中创建对象和实现继承的一种机制,这个机制非常重要,理解它对于深入学习和应用JavaScript是必不可少的。此外,也需要注意,尽管new操作符在JavaScript中非常强大,但在ES6以后...

    javascript new 需不需要继续使用.docx

    ### JavaScript中的`new`操作符是否仍需使用? 在探讨`new`操作符在现代JavaScript开发中的使用情况之前,我们先来明确一下`new`的基本功能。`new`操作符主要用于实例化对象,通过调用构造函数来创建一个新的对象...

    JS使用new操作符创建对象的方法分析

    在编写js代码时,我们有时会需要使用函数来模拟java中的类,并用它来产生对象,在定义了一个构造函数之后我们需要使用new操作符来调用调用函数才能得到我们想要的对象。例如: [removed] function Constructor(name...

    js-object-creation-without-new

    "js-object-creation-without-new"这个主题关注的是如何在不使用`new`操作符的情况下创建JavaScript对象。`new`通常用于实例化一个构造函数,但它不是创建对象的唯一方式。在深入探讨这些方法之前,我们先理解一下`...

    JS获取当前时间并格式化"yyyy-MM-dd HH:mm:ss"

    总结一下,JavaScript中的Date对象提供了丰富的日期和时间操作方法,通过自定义扩展,我们可以轻松地将这些时间信息格式化为所需的字符串。这对于在网页中展示动态更新的日期和时间非常有用,比如在日志记录、倒计时...

    js代码-实现new操作符

    // 使用自定义的new操作符 var instance = myNew(MyConstructor, arg1, arg2); ``` 在上面的`myNew`函数中,我们模拟了`new`操作符的行为。如果构造函数返回了一个对象,那么`new`操作符通常会返回这个对象;否则,...

    javascript中的相等操作符(==与===区别).docx

    ### JavaScript中的相等操作符(`==`与`===`的区别) #### 一、引言 在JavaScript编程中,比较两个变量是否相等是非常常见的需求。ECMAScript提供了两种主要的相等操作符:“==”(相等)和“===”(全等),它们...

Global site tag (gtag.js) - Google Analytics