构造函数就是初始化一个实例对象,对象的prototype属性是继承一个实例对象。

构造函数注意事项:

1.默认函数首字母大写

2.构造函数并没有显示返回任何东西。new 操作符会自动创建给定的类型并返回他们,当调用构造函数时,new会自动创建this对象,且类型就是构造函数类型。

3.也可以在构造函数中显示调用return.如果返回的值是一个对象,它会代替新创建的对象实例返回。如果返回的值是一个原始类型,它会被忽略,新创建的实例会被返回。

1
2
3
4
function Person( name){
       this.name =name;
     }
      var p1=new Person('John');

等同于:

1
2
3
4
5
6
function person(name ){
     Object obj =new Object();
     obj.name =name;
      return obj;
   }
    var p1= person("John");

4.因为构造函数也是函数,所以可以直接被调用,但是它的返回值为undefine,此时构造函数里面的this对象等于全局this对象。this.name其实就是创建一个全局的变量name。在严格模式下,当你补通过new 调用Person构造函数会出现错误。

5.也可以在构造函数中用Object.defineProperty()方法来帮助我们初始化:

1
2
3
4
5
6
7
8
9
10
11
12
13
function Person( name){
      Object.defineProperty(this, "name"{
        get :function(){
           return name;
        },
         set:function (newName){
          name =newName;
        },
        enumerable :true, //可枚举,默认为false
         configurable:true //可配置
       });
    
     var p1=new Person('John');

6.在构造函数中使用原型对象

1
2
3
4
//比直接在构造函数中写的效率要高的多
      Person.prototype.sayName= function(){
        console.log(this.name);
     };

但是如果方法比较多的话,大多人会采用一种更简洁的方法:直接使用一个对象字面形式替换原型对象,如下:

1
2
3
4
5
6
7
8
Person.prototype ={
       sayName :function(){
          console.log(this.name);
       },
       toString :function(){
          return "[Person "+ this.name+"]" ;
       }
     };

这种方式非常流行,因为你不用多次键入Person.prototype,但有一个副作用你一定要注意:

使用字面量形式改写了原型对象改变了构造函数的属性,因此他指向Object而不是Person。这是因为原型对象具有一个constructor属性,这是其他对象实例所没有的。当一个函数被创建时,它的prototype属性也被创建,且该原型对象的constructor属性指向该函数。当使用对象字面量形式改写原型对象时,其constructor属性将被置为泛用对象Object.为了避免这一点,需要在改写原型对象的时候手动重置constructor,如下:

1
2
3
4
5
6
7
8
9
10
Person.prototype ={
       constructor :Person,
        
       sayName :function(){
          console.log(this.name);
       },       
       toString :function(){
          return "[Person "+ this.name+"]" ;
       }
     };

再次测试:

p1.constructor===Person

true

p1.constructor===Object

false

p1 instanceof Person

true

JavaScript构造函数详解的更多相关文章

  1. [原创]JavaScript继承详解

    原文链接:http://www.cnblogs.com/sanshi/archive/2009/07/08/1519036.html 面向对象与基于对象 几乎每个开发人员都有面向对象语言(比如C++. ...

  2. JavaScript事件详解-jQuery的事件实现(三)

    正文 本文所涉及到的jQuery版本是3.1.1,可以在压缩包中找到event模块.该篇算是阅读笔记,jQuery代码太长.... Dean Edward的addEvent.js 相对于zepto的e ...

  3. JavaScript事件详解-Zepto的事件实现(二)【新增fastclick阅读笔记】

    正文 作者打字速度实在不咋地,源码部分就用图片代替了,都是截图,本文讲解的Zepto版本是1.2.0,在该版本中的event模块与1.1.6基本一致.此文的fastclick理解上在看过博客园各个大神 ...

  4. JavaScript正则表达式详解(一)正则表达式入门

    JavaScript正则表达式是很多JavaScript开发人员比较头疼的事情,也很多人不愿意学习,只是必要的时候上网查一下就可以啦~本文中详细的把JavaScript正则表达式的用法进行了列表,希望 ...

  5. JavaScript正则表达式详解(二)JavaScript中正则表达式函数详解

    二.JavaScript中正则表达式函数详解(exec, test, match, replace, search, split) 1.使用正则表达式的方法去匹配查找字符串 1.1. exec方法详解 ...

  6. [转]c++类的构造函数详解

    c++构造函数的知识在各种c++教材上已有介绍,不过初学者往往不太注意观察和总结其中各种构造函数的特点和用法,故在此我根据自己的c++编程经验总结了一下c++中各种构造函数的特点,并附上例子,希望对初 ...

  7. JavaScript事件详解-zepto的事件实现

    zepto的event 可以结合上一篇JavaScript事件详解-原生事件基础(一)综合考虑源码暂且不表,github里还有中文网站都能下到最新版的zepto.整个event模块不长,274行,我们 ...

  8. javascript 函数详解2 -- arguments

    今天我们接着上篇文章来继续javascript函数这个主题.今天要讲的是函数对像中一个很重要的属性--arguments. 相关阅读: javascript 函数详解1 -- 概述 javascrip ...

  9. C++构造函数详解及显式调用构造函数

    来源:http://www.cnblogs.com/xkfz007/archive/2012/05/11/2496447.html       c++类的构造函数详解                  ...

随机推荐

  1. Java单例设计模式(实现Java的一个类只有一个对象)

    单例设计模式的定义:单例设计模式是一种软件设计模式,在它的核心包含一个称为单例类的核心类. 核心便是希望一个类只有一个对象.  如何实现类在内存中只有一个对象呢? 第一步:构造私有:第二步:本身提供一 ...

  2. js控制的选项卡

    选项卡在各种网站网页上是随处可见的一种形式 今天就简单的讲解下 选项卡得制作方法 首先:思路: 我们做一个四个控制的选项卡  则应该有四个小的DIV 外边包裹着一个大的div 用四个input按钮来控 ...

  3. jsp导入数据库数据写法(模板)

    1.导入表格模板 <%@ page language="java" contentType="text/html; charset=utf-8" page ...

  4. SpringBoot:Maven创建一个HelloWorld

    先看一下百度百科的解释: Maven项目对象模型(POM:project object model),可以通过一小段描述信息来管理项目的构建,报告和文档的项目管理工具软件. Maven的核心功能便是合 ...

  5. 力扣(LeetCode)7.整数反转

    给出一个 32 位的有符号整数,你需要将这个整数中每位上的数字进行反转. 示例 1: 输入: 123 输出: 321 示例 2: 输入: -123 输出: -321 示例 3: 输入: 120 输出: ...

  6. 全排列问题Ⅰ(Java实现)

    给定一个没有重复数字的序列,返回其所有可能的全排列. 示例: 输入: [1,2,3] 输出: [ [1,2,3], [1,3,2], [2,1,3], [2,3,1], [3,1,2], [3,2,1 ...

  7. github优秀前端项目分享(转)

    http://microjs.com/# 该网站的资源都托管到了github,microjs.com是一个可以让你选择微型的js类库的网站,该网站里的js库都是压缩后不大于5KB的,非常实用 http ...

  8. docker 安装完mysql 后客户端无法访问

    1.在虚拟机的centos 中安装 docker 的mysql 镜像. docker run --name mysql01 -p 3306:3306 -e MYSQL_ROOT_PASSWORD=12 ...

  9. [mybatis-spring]sqlSessionFactoryBean

    在mybatis中,SqlSessionFactory由SqlSessionFactoryBuilder创建. 在mybatis-spring中,是由SqlSessionFactoryBean创建的. ...

  10. HeadFirst Ruby 第九章总结 mixins & modules

    前言 如果想要复用 method, 可用的方法是针对 Class 的 inheritance,但是, inheritance has its limitations,它的缺点有: 只能 inhert ...