js原型详解

1.内存模型:

1.原型是js中非常特殊一个对象,当一个函数(Person)创建之后,会随之就产生一个原型对象

2. 当通过这个函数的构造函数创建了一个具体的对象(p1)之后,在这个具体的对象中就会有一个属性指向原型

2.演示

以下演示了通过原型的创建方式,使用基于原型的创建可以将属性和方法
  设置为Person专有的,不能再通过window来调用,如此就完成了封装

 <script type="text/javascript">
function Person(){ } Person.prototype.name = "gui"; Person.prototype.age = 20; Person.prototype.say = function(){ alert(this.name+","+this.age); } var p1 = new Person(); p1.say();//gui,20 p1.name="gui22"; p1.say();//gui22,20
     //通过window没有办法调用say方法
say();

        var p2 = new Person();

        p2.say();//gui,20

</script>

【注】p1有自己的内存空间p1.name="gui22";只是改变了自己内存空间的name,并未触及原型中的name

3.下面是一些判断函数有助于理解原型图

//检测某个对象是否指向该函数的原型

// alert(Person.prototype.isPrototypeOf(p1));//true

//检测某个对象的constructor

//  alert(p1.constructor == Person);//true

//检测某个对象是否是自己的属性
        //alert(p1.hasOwnProperty("name"));//true,p1在自己的空间中设置了name属性
        //alert(p2.hasOwnProperty("name"));//false

//删除某个对象的某个属性
      //  delete p1.name;
       //  alert(p1.hasOwnProperty("name"));//false,由于已经删除了

//检测某个对象在原型或者自己中是否包含有某个属性,通过in检测

//alert("name" in p1);

//alert("name" in p2);

//alert("gender" in p1);//gender(性别),在原型和自己的空间中都没有,false

浅谈JavaScript原型图与内存模型的更多相关文章

  1. 浅谈JavaScript原型对象与相关设计模式

    引言 本文先从介绍JavaScript中基本的几种设计模式开始,最后引出原型对象,然后对原型对象有一个较全面的介绍. 1.创建对象的几种设计模式 A.工厂模式 我们知道在JavaScript中创建对象 ...

  2. 浅谈JavaScript原型

    在JavaScript中,所有函数都会拥有一个叫做prototype的属性,默认初始值为“空”对象(没有自身属性的对象). 1.原型属性 如下所示,简单地定义一个函数: function foo(a, ...

  3. 浅谈JavaScript原型与原型链

    对于很多前端开发者而言,JavaScript的原型实在是很让人头疼,所以我这边就整理了一下自己对应原型的一点理解,分享给大家,供交流使用 原型 说起原型,那就不得不说prototype.__proto ...

  4. 浅谈javascript的原型及原型链

    浅谈javascript的原型及原型链 这里,我们列出原型的几个概念,如下: prototype属性 [[prototype]] __proto__ prototype属性 只要创建了一个函数,就会为 ...

  5. 浅谈JavaScript中的闭包

    浅谈JavaScript中的闭包 在JavaScript中,闭包是指这样一个函数:它有权访问另一个函数作用域中的变量. 创建一个闭包的常用的方式:在一个函数内部创建另一个函数. 比如: functio ...

  6. 浅谈JavaScript浮点数及其运算

    原文:浅谈JavaScript浮点数及其运算     JavaScript 只有一种数字类型 Number,而且在Javascript中所有的数字都是以IEEE-754标准格式表示的.浮点数的精度问题 ...

  7. 浅谈javascript函数节流

    浅谈javascript函数节流 什么是函数节流? 函数节流简单的来说就是不想让该函数在很短的时间内连续被调用,比如我们最常见的是窗口缩放的时候,经常会执行一些其他的操作函数,比如发一个ajax请求等 ...

  8. 浅谈Android应用性能之内存

    本文来自http://blog.csdn.net/liuxian13183/ ,引用必须注明出处! 文/ jaunty [博主导读]在Android开发中,不免会遇到许多OOM现象,一方面可能是由于开 ...

  9. 浅谈 JavaScript 编程语言的编码规范

    对于熟悉 C/C++ 或 Java 语言的工程师来说,JavaScript 显得灵活,简单易懂,对代码的格式的要求也相对松散.很容易学习,并运用到自己的代码中.也正因为这样,JavaScript 的编 ...

随机推荐

  1. spring boot与ElasticSearch的集成

    本文主要介绍Spring boot与ElasticSearch的集成,因为Spring boot的教程以及ElasticSearch的学习其他博客可能更优秀,所以建议再看这篇文章前先学习学习一下Spr ...

  2. 牛客网NOIP赛前集训营-提高组(第六场)B-选择题

    题目描述 有一道选择题,有 a,b,c,d 四个选项. 现在有 n 个人来做这题,第 i 个人有 pi,j 的概率选第 j 个选项. 定义\(cnt(x)\)为选第$ x $个选项的人数. 令\(mx ...

  3. 前端每日实战:49# 视频演示如何用纯 CSS 创作一支诱人的冰棍

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/vrxzMw 可交互视频教程 此视频 ...

  4. 插入排序->希尔排序

    /** * 插入排序 */ public class InsertSort { public static void main(String[] args){ int[] arr = {5,5,2,6 ...

  5. 百度小程序-swiper组件

    .swan <!-- 轮播图S --> <view class="swiper-box"> <swiper class="banner&qu ...

  6. npm 是干什么的?(非教程)

    看了之后就很清楚什么叫NPM,以后它是干嘛的.谢谢楼主 网上的 npm 教程主要都在讲怎么安装.配置和使用 npm,却不告诉新人「为什么要使用 npm」.今天我就来讲讲这个话题. 本文目标读者是「不太 ...

  7. C#生成一个按时间排序的DUID

    /// <summary> /// 创建一个按时间排序的Guid /// </summary> /// <returns></returns> publ ...

  8. php 统计每天价格,货币种类,汇总得算法和数据处理 (后端和前段实现自动统计价格和币种类型)

    整体实现逻辑介绍 1.对查询数据做一个总体查询,需要根据查询自己主要业务逻辑数据. 2.对总体查询数据和时间和币种类型做三部分数据处理. 3.总体查询数据按照币种和日期组装二维数据对应得键值是价格. ...

  9. LintCode之回文数

    题目描述: 我的代码: public class Solution { /* * @param num: a positive number * @return: true if it's a pal ...

  10. 【Jmeter基础】 Linux上运行Jmeter

    Jmeter 是一个强大的并发压测工具,常用于性能测试,压力测试,接口测试等领域.本文将介绍如下内容: 1. Jmeter 执行阶梯式压测 2. Jmeter 如何压测网站的js,css 等资源 3. ...