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

1.如果就一个函数,没有返回值,没有prototype成员,然后使用new,会是什么结果呢?如果一个函数没有返回值,那么如果不使用new来 创建变量,那么该变量的值为undefined.如果用了new,那么就是Object.说明一个函数的默认的Prototype是Object.

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"
 

JS 中的 new 操作符的更多相关文章

  1. js中的new操作符与Object.create()的作用与区别

    js中的new操作符与Object.create()的作用与区别 https://blog.csdn.net/mht1829/article/details/76785231 2017年08月06日 ...

  2. JS中的一元操作符

    表达式 一元操作符 优先级 结合性 运算顺序 表达式是什么? 就是JS 中的一个短语,解释器遇到这个短语以后会把对它进行计算,得到一个结果参与运算,我们把这种要参与到运算中的各种各样的短语称为表达式. ...

  3. JS中的new操作符

    在JS中定义一个构造函数,然后用new操作符构造对象obj,JS代码如下. function Base(){ this.name = "swf"; this.age =20; } ...

  4. JS中的 new 操作符简单理解

    首先上一一个简单的 new 操作符实例 var Person = function(name){ this.name = name; this.say = function(){ return &qu ...

  5. JS中的delete操作符

    首先,delete删除成功返回true,失败返回false. js代码: function wxCount ($element) { this.init($element); } wxCount.pr ...

  6. js中的new操作符解析

    new 操作符做了以下事情: 1.创建一个对象,将对象赋值给this function Person(name, age) { console.log(this) //Person {} } let ...

  7. JS中void(0)操作符的使用

    今天 在看源码时,发现这种写法 if(value === void(0)){ // } 以前没有见过这种写法,感觉就是判断一个变量是否有值,官网上是这样说的: void运算符 对给定的表达式进行求值, ...

  8. JS中的new操作符原理解析

    var Person = function(name){ this.name = name; } Person.prototype.sayHello = function() { console.lo ...

  9. js-分享107个js中的非常实用的小技巧(借鉴保存)

    转载原文:http://***/Show.aspx?id=285 1.document.write(""); 输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:doc ...

随机推荐

  1. dskms改为ckplayer播放器

    将ckplayer代码文件夹上传到/var/www/html/public/static/plugins/目录下修改/var/www/html/application/home/view/defaul ...

  2. 雅礼集训 2017 Day4 编码(2-sat)

    题意 题目链接:https://loj.ac/problem/6036 思路 ​ 首先,有前缀关系的串不能同时存在,不难看出这是一个 2-sat 问题.先假设所有串都带问号,那么每一个字符串,我们可以 ...

  3. 聊聊Runloop

    1.什么是Runloop 在开始聊RunLoop之前,我们先来了解一下程序的执行原理.一般来说,程序是在线程中执行,一个线程一次只能执行一个任务(关于GCD,可看上篇文章介绍),执行完成后线程就会退出 ...

  4. PostMan测试REST接口时候,如何绕过登录的验证

    原文地址:https://blog.csdn.net/qq_34178998/article/details/80361315 之前测试的时候,需要页面进行登录之后,才能让访问后台程序,但是在进行接口 ...

  5. jquery库与其他库(比如prototype)冲突的解决方法

    前端开发很容易会遇到jQuery库与其他库冲突的场景,比如和prototype库冲突. 实际上这种冲突是因为不同的第三方JS库争夺对$标识符的控制权引起的. 解决方法,就是使用jQuery提供的jQu ...

  6. zipkin微服务调用链分析(python)

    一,概述 zipkin的作用 在微服务架构下,一个http请求从发出到响应,中间可能经过了N多服务的调用,或者N多逻辑操作,如何监控某个服务,或者某个逻辑操作的执行情况,对分析耗时操作,性能瓶颈具有很 ...

  7. Base64和本地以及在线图片互转

    package com.ruoyi.common.utils; import java.io.ByteArrayOutputStream; import java.io.FileInputStream ...

  8. JavaIO学习:转换流

    转换流 1.涉及到的类 InputStreamReader:将InputStream转换为Reader OutputStreamWriter:将Writer转换为OutputStream 2.构造器 ...

  9. 【spring boot】加载同名Bean解决方法

    原文地址:https://blog.csdn.net/liuyueyi25/article/details/83280239 @SpringBootApplication @ComponentScan ...

  10. 【问题记录】ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: YES)

    一.问题描述 环境:MySQL 8.0 + Windows 由于密码错误或者其他原因导致无法连上MySQL服务,如下图: 二.解决方案 解决该问题的具体步骤如下: 1.关闭MySQL服务 以管理员权限 ...