js中构造函数创建对象加不加new的问题

js中构造函数创建对象加不加new的问题

2016-11-13 09:27
844人阅读 评论(0)
收藏
举报

版权声明：本文为博主原创文章，未经博主允许不得转载。

本文中将探讨一下，用函数生成对象时候加new 与不加new 的区别。首先看下面一个函数代码块。

[javascript]
view plain
copy

print?

function Student(name, age, gender) {  
    this.name = name;  
    this.age = age;  
    this.gender = gender;  
    this.sayHi = function () {  
        console.log("hello" + this.name );  
    }  
sole.log(this);  
}  

function Student(name, age, gender) {
this.name = name;
this.age = age;
this.gender = gender;
this.sayHi = function () {
console.log("hello" + this.name );
}
console.log(this);
}

如果，我们使用 var stu1 =  Student("zs", 18, "gender");等同于执行了Student 函数，在此种情况，函数内部的this，指向的是window ,函数执行过后，并没有返回值，那么就默认返回一个undefined.所以如果console.log(stu1)，那么将得到一个undefined值。同时可以看到控制台中，window对象中，挂载了name,age,gender,sayHi等变量。



在使用var stu1 =  new  Student("zs", 18, "gender");加入一个new ,那么通过函数内部的console.log(this)可以看到，该this 指向了当前的stu1。console.log(stu1)可以看到。两只完全相等。



关于其中__proto__的含义，涉及到js面向对象部分，我们常见的jquery, angular,react,无不用到js面向对象的知识。如果新手，不了解js的学习的先后顺序，直接上手框架部分，就如同学过java基础过后，不用学习servlet，直接学习后面的框架一样。到时候，只是能用，对自己提高不明显。

继续上面的补充，请看以下代码片段：

[javascript]
view plain
copy

print?

function Num(value) {  
    this.value = parseInt(value);  
    var num = parseInt(value);  
    return num;//如果是值类型就不返回了 如果是引用类型还返回  
}  
var num1 = Num("18");  
var num2 = new Num("18");  
  
console.log(num1);  
console.log(num2);  

function Num(value) {
this.value = parseInt(value);
var num = parseInt(value);
return num;//如果是值类型就不返回了 如果是引用类型还返回
}
var num1 = Num("18");
var num2 = new Num("18");

console.log(num1);
console.log(num2);

关于return 的内容，对于 不加new 来执行函数来说，返回值，就是函数的执行结果，对于加new 关键字来执行函数而言，如果return 的是基本数据类型，那么忽视掉该return值，如果返回的是 一个对象类型，那么num2就指向该对象类型。上面的执行结果为：



如果上面代码块改为：

[javascript]
view plain
copy

print?

function Num(value) {  
    this.value = parseInt(value);  
    var num = parseInt(value);  
sole.log(this)  
    return {name:'zs'};//如果是值类型就不返回了 如果是引用类型还返回  
  
}  
var num = new Num("18");  
  
console.log(num);  

function Num(value) {
this.value = parseInt(value);
var num = parseInt(value);
console.log(this)
return {name:'zs'};//如果是值类型就不返回了 如果是引用类型还返回

}
var num = new Num("18");

console.log(num);

那么执行结果为：



可以看到return 前打印的this,和return后的num对象差距挺大。



顶 0 踩 0
 
 
上一篇前后端交互中json的用法

下一篇dom级别

  相关文章推荐

•
Js New一个函数和直接调用的区别
•
携程机票大数据基础平台架构演进-- 许鹏
•
javaScript的无new构建，jquery源码对象构建方法
•
Python可以这样学--董付国
•
随笔：用心良苦 - 理解 jQuery 的构造函数
•
一步一步学Spring Boot
•
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式).docx
•
深入浅出C++程序设计
•
JS构造函数创建对象时的传参问题
•
Android Material Design 新控件
•
js中创建对象是，工厂方式与构造函数方式中this的区别
•
机器学习需要用到的数学知识
•
js创建对象 之 工厂模式,构造函数模式
•
JS---一步一步学会如何使用构造函数创建对象
•
在JS中组合使用构造函数模式和原型模式创建对象
•
用构造函数创建对象时的this的指向问题