连看4篇前辈的文章,记录一些知识点

  1. Javascript继承机制的设计思想

  2. Javascript 面向对象编程(一):封装

  3. Javascript面向对象编程(二):构造函数的继承

  4. Javascript面向对象编程(三):非构造函数的继承

1. constructor

在Javascript语言中,new命令后面跟的不是类,而是构造函数(constructor)。

创建一个叫Student的构造函数,表示学生对象的原型

function Student(name){
    this.name = name;
  }

顺便带一下js中this的用法
Javascript 的 this 用法

对这个构造函数使用new,会生成Student的实例

var st1 = new Student("lilei")
console.log(st1.name) // lilei

此时st1 会自动含有一个属性constructor,指向构造函数

console.log(st1.constructor == Student) //true

用构造函数生成实例对象(使用new),有一个缺点,那就是无法共享属性和方法

比如说有同学韩梅梅和同学李雷,他们共同在太阳班

function Student(name){
this.name = name;
this.class = "sun";
}
var st1 = new Student("lilei")
var st2 = new Student("hanmeimei")

输出二人的班级

console.log(st1.class)//sun
console.log(st2.class)//sun

班级改名,修改李雷的班级为月亮班

韩梅梅的班级名称没有发生变化,依然是sun(太阳班)

st1.class = "moon"
console.log(st1.class) //moon
console.log(st2.class) //sun

所以,构造函数中的共有属性无法做到数据共享,要做到数据共享,需要用到prototype

2. prototype

构造函数设置有prototype属性,属性中包含一个对象,需要共享的属性和方法,放在prototype对象里

。不需要共享的属性和方法,放在构造函数里

将上述例子改写

function Student(name){
this.name = name;
}
Student.prototype = {class : "sun"} var st1 = new Student("lilei")
var st2 = new Student("hanmeimei") st1.prototype.class = "moon"
console.log(st1.class) //moon
console.log(st2.class) //moon

每一个实例都有一个constructor属性,默认调用prototype的constructor属性

st1.constructor  = st1.prototype.constructor

总结:


constructor储存不需要共享的属性和方法,而prototype对象储存需要共享的属性和方法

js中prototype,constructor的理解的更多相关文章

  1. 【JavaScript】关于JS中的constructor与prototype

    最初对js中 object.constructor 的认识: 在学习JS的面向对象过程中,一直对constructor与prototype感到很迷惑,看了一些博客与书籍,觉得自己弄明白了,现在记录如下 ...

  2. 【推荐】关于JS中的constructor与prototype【转】

    最初对js中 object.constructor 的认识: 在学习JS的面向对象过程中,一直对constructor与prototype感到很迷惑,看了一些博客与书籍,觉得自己弄明白了,现在记录如下 ...

  3. js中prototype和constructor的认识

    最初对js中 object.constructor 的认识: 我们都知道,在JS中有一个function的东西.一般人们叫它函数.比如下面的代码 function Person(name)    {  ...

  4. js中关于constructor与prototype的理解

    1.①__proto__和constructor属性是对象所独有的:② prototype属性是函数所独有的,因为函数也是一种对象,所以函数也拥有__proto__和constructor属性. 2. ...

  5. 分析js中的constructor 和prototype

    在javascript的使用过程中,constructor 和prototype这两个概念是相当重要的,深入的理解这两个概念对理解js的一些核心概念非常的重要. 我们在定义函数的时候,函数定义的时候函 ...

  6. Js中Prototype、__proto__、Constructor、Object、Function关系介绍

    一. Prototype.__proto__与Object.Function关系介绍 Function.Object:都是Js自带的函数对象.prototype,每一个函数对象都有一个显式的proto ...

  7. 深入分析js中的constructor 和prototype

    在javascript的使用过程中,constructor 和prototype这两个概念是相当重要的,深入的理解这两个概念对理解js的一些核心概念非常的重要. 我们在定义函数的时候,函数定义的时候函 ...

  8. 【转】Js中Prototype、__proto__、Constructor、Object、Function关系介绍

    一    Prototype.__proto__与Object.Function关系介绍        Function.Object:Js自带的函数对象.         prototype,每一个 ...

  9. JS中的constructor与prototype

    http://www.cnblogs.com/qiantuwuliang/archive/2011/01/08/1930548.html 在学习JS的面向对象过程中,一直对constructor与pr ...

随机推荐

  1. python3 小工具

    扫描IP的端口是否开放:Porttest.py # -*- coding: utf-8 -*- import sys import os import socket #扫描 def scanport( ...

  2. 7款让人惊叹的HTML5粒子动画特效(转载)

    1.HTML5 Canvas粒子模拟效果 这是一款利用HTML5 Canvas模拟出来的30000个粒子动画,当你用鼠标在canvas画布上移动时,鼠标周围的一些粒子就会跟着你移动,并形成一定的图案, ...

  3. 唉,可爱的小朋友---(DFS)

    唉,小朋友是比较麻烦的.在一个幼儿园里,老师要上一节游戏课,有N个小朋友要玩游戏,做游戏时要用小皮球,但是幼儿园里只有M个小皮球,而且有些小朋友不喜欢和一些小朋友在一起玩,而只喜欢和另一些小朋友一起玩 ...

  4. Git查看两个版本之间修改了哪些文件

    gdiff 63e3b647d55fcc643e793e650c893be8601719b1 548cdaf01dbc2f08d1ca0b697a24afe512b75a2f --stat git l ...

  5. socket并发聊天

    服务端: import socketserver class MyServer(socketserver.BaseRequestHandler): def handle(self): print('服 ...

  6. CVE-2017-8912 CMS Made Simple命令执行

    CVE-2017-8912 CMS Made Simple命令执行 1)了解命令执行漏洞,并且能够从源码中发现. 2)用eval处理函数,并且过滤不严导致命令执行. 实验步骤 1.1)登录网站 1.2 ...

  7. 大课深度复盘、解密研发效率之道 | 第42届MPD工作坊成都站日程公布!

    互联网时代,随着区块链.大数据.人工智能等技术的快速发展,产品迭代速度飞快.在这样的市场环境下,提升研发效率.降低研发成本,同时支撑业务的快速发展,是每个企业都追求的目标之一. 大中型企业如何快速转型 ...

  8. Gym 101775C - Traffic Light - [思维题]

    题目链接:http://codeforces.com/gym/101775/problem/C 题意: 给出 $N$ 个红绿灯,又给出 $N+1$ 个距离 $S_i = S_0,S_1, \cdots ...

  9. CLOSE_WAIT状态的原因与解决方法(转载留自己看)

    这个问题之前没有怎么留意过,是最近在面试过程中遇到的一个问题,面了两家公司,两家公司竟然都面到到了这个问题,不得不使我开始关注这个问题.说起CLOSE_WAIT状态,如果不知道的话,还是先瞧一下TCP ...

  10. python_打包成exe

    1. 安装pyinstaller pip install pyinstaller 或通过国内镜像下载(较快): pip install pyinstaller -i http://pypi.douba ...