构造函数就是初始化一个实例对象,对象的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. HDU 5143 NPY and arithmetic progression(思维)

    http://acm.hdu.edu.cn/showproblem.php?pid=5143 题意: 给定数字1,2,3,4.的个数每个数字能且仅能使用一次,组成多个或一个等差数列(长度大于等于3), ...

  2. python连接MongoDB(无密码无认证)

    无密码无认证下连接 from pymongo import MongoClient host = '127.0.0.1' # 你的ip地址 client = MongoClient(host, ) # ...

  3. Java 中常见的各种排序算法汇总

    首先,Java中自已是有排序的 说明:(1)Arrays类中的sort()使用的是“经过调优的快速排序法”;(2)比如int[],double[],char[]等基数据类型的数组,Arrays类之只是 ...

  4. CentOS6.5下搭建LAMP+FreeRadius+Daloradius Web管理和TP-LINK路由器、H3C交换机连接,实现,上网认证和记账功能

    什么是RADIUS服务: RADIUS:(Remote Authentication Dial In User Service)中文名为远程用户拨号认证服务,简称RADIUS,是目前应用最广泛的AAA ...

  5. 力扣(LeetCode)976. 三角形的最大周长

    给定由一些正数(代表长度)组成的数组 A,返回由其中三个长度组成的.面积不为零的三角形的最大周长. 如果不能形成任何面积不为零的三角形,返回 0. 示例 1: 输入:[2,1,2] 输出:5 示例 2 ...

  6. ArcFace2 #C 视频人脸比对教程

    请允许我大言不惭,叫做教程,特希望各位能指正.哦,我用的是vs2017.使用虹软技术 一.准备工作1.创建项目 2.添加EMGU.CV包 3.复制虹软的dll到项目 ,并设属性“复制到输出目录”为“如 ...

  7. unbuntu安装Node.js

    在官网https://nodejs.org/en/下载 手动创建链接的话,新安装的angular的ng   typescript的tsc都要自己手动建立软链接,要不就每个工程里npm install一 ...

  8. MYSQL常用函数(控制流函数)

    MySQL有4个函数是用来进行条件操作的,这些函数可以实现SQL的条件逻辑,允许开发者将一些应用程序业务逻辑转换到数据库后台. MySQL控制流函数: CASE WHEN[test1] THEN [r ...

  9. Codeforces 981 E - Addition on Segments

    E - Addition on Segments 思路: dp dp[i]表示构成i的区间的右端点 先将询问按r排序 然后,对于每次询问,每次枚举 i 从 n-x 到 1,如果dp[i] >= ...

  10. DirectX之顶点法线的计算

    首先要明白,顶点法线存在的原因:确定灯光照射到物体表面的角度.所以一提到顶点法线,肯定要进行与灯光相关的运算了. 下面是顶点法线的计算方式 假如 A.B.C三个顶点构成一个三角形,它们对应的顶点法线分 ...