前言

上篇说创建对象的时候提到了带返回值的构造函数,那里没有和大家说这个问题,今天就和大家一起学习构造函数和new操作符。我也是最近才稍微弄明白点这个构造函数,以前总是忽略一些问题,现在就是想到哪块不行,就研究下,查查资料,自己捣鼓捣鼓,希望大家也随手记一下自己突然想起的哪块不熟悉知识点。

javascript中的类

JavaScript 是面向对象的语言,但是他的面向对象不是基于类的,是基于原型的。javascript中没有是类,任何所谓的类都是我们模拟的,其中一种方法就是通过构造函数来模拟类。在面向对象编程中,类(class)是对象(object)的模板,定义了同一组对象(又称"实例")共有的属性和方法。Javascript语言不支持"类",但是可以用一些变通的方法,模拟出"类"。

function Dog() {
    this.name = "旺财";
  }
//创建一个对象
var dog = new Dog();

大家可以看一些这篇文章http://www.ruanyifeng.com/blog/2012/07/three_ways_to_define_a_javascript_class.html

构造函数与new

啥时构造函数,我一时也说不明白,我知道在javascript中构造函数是创建自定义类型的,像Array,String等这些是原生的类型,这些是原来就有的,我们可以直接使用这些类型创建对象,假如你想要创建一个新的自定义类型,比如类型Person,没办法了使用原生的类型,需要自定义了。构造函数是一种特殊的方法,主要用来在创建对象时初始化对象,即为对象成员变量赋初始值,总与new运算符一起使用在创建对象的语句中。

构造函数也是函数,只不过是一个特殊的函数,之所以叫构造函数是因为和new放在了一起,不和new一起使用他就是一个普通的函数。

function Person(name){
this.name = name;
}
//普通函数
Person("hainan");
console.log(window.name);//hainan
//构造函数
var person = new Person("Allenxing");
console.log(person.name);//Allenxing

估计大家看明白了,构造函数和普通函数没有什么区别,普通函数和new一起使用,那么普通函数也可以叫构造函数,记住在new后面的就叫构造函数。

我们用一个普通的函数new出来了一个对象,如何new的一会说。

new的过程

表面看起来是一个简单的过程,其实是一个蛮复杂的流程:

  1. 创建一个空对象。
  2. 设置这个对象的原型,就是指定__proto__的指向
  3. 将构造函数的作用域赋给新对象(因此this就指向了新对象)
  4. 执行构造函数中的代码(给这个新对象添加方法和属性)
  5. 返回这个对象(this)

这个是默认的流程,是最简单的流程,一般我们new一个对象的时候这些都是看不到的,我们知道得到最后的结果,现在我们可以模拟一些这个流程,一步一步来就可以了

function Person(name){
var obj = new Object();//新建对象
obj.name = name;//赋值属性
obj.__proto__ = Person.prototype;//指定对象中的指针
return obj;//返回对象
}
Person.prototype.getName = function(){
console.log(this.name);
} var person = new Person("hainan");
person.getName();

看看我们的结果

就是这样子了,和原来new出来的一样,哦了。

这个是默认的构造函数,是没有返回值的构造函数,要是我们的构造函数有返回值了,那么结果会是什么样的呢?看一个例子

function Person(name){
this.name = name;
var obj = new Object();
obj.name = "Allenxing";
return obj;
}
var person = new Person("hainan");
console.log(person.name);//Allenxing

看出来了吧,返回的是return 之后的值,而不是默认的this,那是不是返回所有的值会都覆盖原来的this对象呢?瞧瞧看

function Person(name){
this.name = name;
return "Allenxing";
}
var person = new Person("hainan");
console.log(person.name);//hainan

显然不是这样的,这个例子并没有覆盖返回原来的this对象。

总结一下,如果构造函数中返回的是一个对象,数组,那么就会覆盖返回原来的this对象,如果不是对象和数组,即使是undefined,null和 空 都是返回this对象。大家可以试试看,咱试两个看看

function Person(name){
this.name = name;
return new String("Allenxing");//对象
}
var person = new Person("hainan");
console.log(person.name);//undefined
function Person(name){
this.name = name;
return undefined;
}
var person = new Person("hainan");
console.log(person.name);//hainan

这里就不在实验了,有兴趣大家试一下。

小结

今天和大家说了一下new和构造函数,只有new之后的函数才叫构造函数,否则都是普通函数,当然这都是概念,不用太较真,只要懂原理了爱叫什么叫什么。有啥问题请大家指正。

PS:祝有对象的道友,情人节快乐!暂无对象的道友,元宵节快乐!

【javascript基础】6、new与构造函数的更多相关文章

  1. javascript基础知识--什么是构造函数?什么是实例化对象?

    前言--讲在前面 我想有很多以前很少接触后台编程语言的初学者朋友跟我一样,对javascript里面一系列的“名词”搞的一头雾水.好像大概知道讲的是什么,但其实理解的还是不清楚:我想,学习任何一种知识 ...

  2. JavaScript基础有关构造函数、new关键字和this关键字(009)

    1. 总是记得用new关键字来执行构造函数.前面提到,可以用构造函数创建JavaScript的对象,这个构造函数在使用的时候需要使用new关键字,但如果忘记写入new关键字,会怎么样?事实上这个函数还 ...

  3. JavaScript基础

    JavaScript基础 JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处 ...

  4. 一步步学习javascript基础篇(0):开篇索引

    索引: 一步步学习javascript基础篇(1):基本概念 一步步学习javascript基础篇(2):作用域和作用域链 一步步学习javascript基础篇(3):Object.Function等 ...

  5. 一步步学习javascript基础篇(3):Object、Function等引用类型

    我们在<一步步学习javascript基础篇(1):基本概念>中简单的介绍了五种基本数据类型Undefined.Null.Boolean.Number和String.今天我们主要介绍下复杂 ...

  6. Javascript基础回顾 之(三) 面向对象

    本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...

  7. Javascript基础回顾 之(一) 类型

    本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...

  8. JavaScript 基础回顾——对象

    JavaScript是基于对象的解释性语言,全部数据都是对象.在 JavaScript 中并没有 class 的概念,但是可以通过对象和类的模拟来实现面向对象编程. 1.对象 在JavaScript中 ...

  9. javascript基础部分

    javascript基础部分 1  数据类型: 基础数据类型(通过typeof来检测):Number,string,undefined,null,boolean,function typeof只能检测 ...

  10. 【javascript基础】系列

    这是本人记录的javascript基础知识,希望能给大家的学习带来一点帮助. [javascript基础]1.基本概念 [javascript基础]2.函数 [javascript基础]3.变量和作用 ...

随机推荐

  1. 在chrome console加入jquery库

    var jq = document.createElement('script'); jq.src = 'http://libs.baidu.com/jquery/1.9.1/jquery.min.j ...

  2. 微信公众平台如何获取用户的OpenID(一)

    如何获取用户的OpenID,对于微信开发模式下的开发来说,那就是一个非常简单的小功能了.简单介绍一下我是怎样去获取OpenID的. 微信服务器与公众账号服务器交互的信息可以分为3类:请求消息.事件和响 ...

  3. JavaWeb Chapter 7 监听器

    1.  监听器Session.request.context对象属性的变化: 2.  三个对象都有生命周期和属性改变的监听: 3.  Session另外还有会话迁移和对象绑定的监听: 4.  Sess ...

  4. [强连通分量] POJ 2186 Popular Cows

    Popular Cows Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 31815   Accepted: 12927 De ...

  5. iOS 通过 JSPatch 实时修复线上 bug!

    JSPatch 是一个开源项目(Github链接),只需要在项目里引入极小的引擎文件,就可以使用 JavaScript 调用任何 Objective-C 的原生接口,替换任意 Objective-C ...

  6. 1238. Folding

    http://acm.timus.ru/problem.aspx?space=1&num=1238 DP+记忆化搜索 思路不难,关键是最优结果的储存问题,为了编写方便,直接用string储存最 ...

  7. XCode6.0的iOS免证书真机测试方法(MAC及黑苹果均有效)

    目前在XCode上开发的iOS程序只能在模拟器Simulator中运行,如果要放到真机上测试,需要苹果官方认证的开发者账号,购买开发者证书iDP,99美金一年啊!!! 作为刚开始学习iOS编程的菜鸟, ...

  8. 如何修改WAMP中mysql默认空密码 以及修改时报错的处理方法

    WAMP安装好后,mysql密码是为空的,那么要如何修改呢?其实很简单,通过几条指令就行了,下面我就一步步来操作. 首先,通过WAMP打开mysql控制台. 提示输入密码,因为现在是空,所以直接按回车 ...

  9. jquery 调用ajax返回json

    ie调用可以,火狐和chrome皆失败,找了半天原因. 被屏蔽了. 火狐和chrome 对同一个域名不同端口的调用也严格限制,不给调用.只能用jsonp. 查看网络的返回状态,错误信息,F12 很重要 ...

  10. UVA 247 电话圈 (floyd传递闭包 + dfs输出连通分量的点)

    题意:输出所有的环: 思路:数据比较小,用三层循环的floyd传递闭包(即两条路通为1,不通为0,如果在一个环中,环中的所有点能互相连通),输出路径用dfs,递归还没有出现过的点(vis),输出并递归 ...