js实例属性和原型属性示例详解

详情请仔细研读注释，这里就废话少说，直接上代码了。

代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>测试文档</title>
    <script type="text/javascript">
// 实质上属性和方法是一样的，方法是属性为引用型的函数。
//一个对象有4种属性：
//                 1，构造函数通过this关键字定义的属性
//                 2，构造函数通过var关键字定义的属性
//                 3,构造函数的原型对象添加的属性
//                 4，对象动态添加的属性
//实例的公有属性：1      通过this关键字定义的属性           可访问   1，2，3，4
//实例的私有属性：2      通过var关键字定义的属性。          可访问   2
//实例的共享属性：3      通过实例指向的原型添加的属性。      可访问   1,3,4
//实例的静态属性：4      对象动态添加的属性。               可访问  1,3,4

//总结：
//     实例属性：1，公有
//              2，私有
//              4，静态
//     原型属性：3，共享

//this定义的为特权属性。全部可访问
//var定义的为私有属性。
//动态添加的属性为公有属性。不可访问私有属性

//实例对象指向的原型属性为原型属性。不可访问私有属性，优先级低于公有属性

//实例属性主要有公有属性和特权属性构成。均可被外部和原型属性访问。主要区别在于是否可访问私有属性
//原型属性优先级低于实例属性。可被外部访问和实例属性访问（除私有属性）

//-----------------此处为分割线-----------------------------
// 公有属性：对象暴露给外部环境的属性。也是对象的属性。
// 私有属性：对象内部的属性，往往不可访问.在构造函数层面上考虑才有意义。
// 静态属性：动态添加的属性。也是对象的属性。
// 共有属性：所有构造函数生成的实例所共享的属性。

function User(){
//           公有属性：每new一个User实例对象，都有的属性。
//                    为实例属性，所有实例的属性不共享内存。
//                    外部可访问。
           this.name='byronvis';
//           特权方法：每new一个User实例对象，都有的方法。
//                    为实例方法，所有实例的方法不共享内存。
//                    外部可访问。
//                    可访问公有属性。
//                    可访问私有属性。
           this.sayName=function(){
            alert(this.name);
               alert(this.school);
            alert(age);//变量声明会自动提前。
            alert(this.sex);
           };
//           私有属性：外部不可访问。
//                    仅对构造函数有意义，对于new的User实例对象无意义。
           var age=22;
//           私有方法：外部不可访问。
//                    仅对构造函数有意义，对于new的User实例对象无意义。
           function sayAge(){
               alert(age);
           }
           sayAge();
       }
//       共有属性： 共享内存。
       User.prototype.school='zky';
//       共有方法：可访问公有属性。
//                共享内存。
       User.prototype.saySchool=function(){
           alert(this.school);
           alert(this.name);
           alert(this.sex);
           alert(age);
       };
        var obj=new User();
//       静态属性：就是动态添加的实例属性。
        obj.sex='man';
//       静态方法：就是动态添加的实例方法。
        obj.saySex=function(){
            alert(this.sex);
            alert(this.name);
            alert(this.school);
            alert(age);
        };
//-----------------此处为分割线-----------------------------
////      证明this关键字定义的属性和动态添加的属性本质上一样的，都可认为是实例对象的公有属性。
//       验证： this关键字定义的属性访问动态添加的属性
//        obj.sayName();//true
//        验证：动态添加的属性访问this关键字定义的属性
//        obj.saySex();//true
//        验证：公有属性访问私有属性
//        obj.sayName();//true
           obj.saySex();//false
//        验证：共享属性访问私有属性
//        obj.saySchool();//false

</script>
</head>
<body>
    测试文档
</body>
</html>

小伙伴们是否看明白了，了解了实例属性和原型属性了吗？本文讲述的非常的详细，推荐给大家，希望对小伙伴们能有所帮助

赞 (0)

相关推荐

  • 举例说明JavaScript中的实例对象与原型对象

    首先声明:javascript中每个对象都有一个constructor属性和一个prototype属性.constructor指向对象的构造函数,prototype指向使用构造函数创建的对象实例的原型对象. function Person(){ } var person = new Person(); Person.prototype = { constructor : Person, name : 'zxs', age : 24, sayName : function(){alert(this

  • javascript原型模式用法实例详解

    本文实例讲述了javascript原型模式用法.分享给大家供大家参考.具体分析如下: 一般在了解了工厂模式和构造函数模式的弊端之后,就知道为什么需要原型模式了   原型模式i的定义:每个函数都有一个prototype(原型)属性,这个属性是一个对象,它的用途是包含可以由特定类型的所有实例共享的属性和方法.比如在构造函数模型中sayInformation()方法,如果声明两个实例就要构造两次sayInformation方法,但是声明两次是没有必要的,这就是为什么有原型模式的出现(尼玛,网上那些博客

  • js对象继承之原型链继承实例

    本文实例讲述了js对象继承之原型链继承的用法.分享给大家供大家参考.具体分析如下: 复制代码 代码如下: <script type="text/javascript"> //定义猫的对象 var kitty  = {color:'yellow',bark:function(){alert('喵喵');},climb:function(){alert('我会爬树')}}; //老虎对象的构造函数 function tiger(){  this.color = "ye

  • javascript原型链继承用法实例分析

    本文实例分析了javascript原型链继承的用法.分享给大家供大家参考.具体分析如下: 复制代码 代码如下: function Shape(){   this.name = 'shape';   this.toString = function(){    return this.name;   }  }    function TwoDShape(){   this.name = '2D shape';  }  function Triangle(side,height){   this.n

  • JavaScript检测实例属性, 原型属性

    0.前提 JavaScript对象的属性分为两种存在形态. 一种是存在实例中, 另一是存在原型对象中. 根据上述, 检测属性的时候会出现4种情况 既不存在实例中, 也不存在原型对象中 存在实例中, 不存在原型对象中 不存在实例中, 存在原型对象中 既存在实例中, 也存在原型对象中 1.hasOwnPrototype() hasOwnPrototype()接受一个字符串格式的属性名称, 如果实例本身存在该属性(情况2/情况4), 返回true. 否则, 返回false(情况1/情况3). 复制代码

  • javascript组合使用构造函数模式和原型模式实例

    本文实例讲述了javascript组合使用构造函数模式和原型模式的方法.分享给大家供大家参考.具体如下: function testPrototype2(){ function Person3(name, age, job){ this.name=name; this.age=age; this.job=job; this.friends =["shelb", "court"]; } Person3.prototype = { constructor:Person3

  • Java设计模式之原型设计示例详解

    Java设计模式之原型设计示例详解

    目录 简单说一下(定义) 稍微夸一下(优缺点) 顺便提一下(适用场景) 着重讲一下(深.浅克隆) 多多用一下(结构.代码实现) 简单说一下(定义) 什么是原型模式:原型模式是用于创建重复的对象,同时又能保证性能.用一个已经创建的实例作为原型,通过复制该原型对象来创建一个或者多个和原型相同或者相似的新对象 举例说明:我们都玩过打飞机的游戏,敌军的飞机可谓是数不胜数,但是如果每出一架敌机都要重新实例化的话,那么自然我们的功能很复杂.所以这个时候我们的原型模式就派上用场了,只实例化一架飞机出来,其他的

  • JS实现一个微信录音功能过程示例详解

    目录 功能原型图 拆解需求 评估时间 代码实现 功能原型图 其实就是微信发送语音的功能.没有转文字的功能. 拆解需求 根据原型图可以很容易的得出我们需要做的内容包括下面三个部分: 接入微信的语音SDK 调用微信SDK的API逻辑 界面和交互的实现 其中第一点和第二点属于业务逻辑部分,第三点属于交互逻辑部分.对于业务逻辑和交互逻辑的关系在我的另外一篇文章描述过,我在vue中是这样拆分组件的 从原型图可以分析出如下的流程图: 评估时间 第三事情是评估时间.在接到这个需求的时候,我们需要假设我们在此之

  • Three.js实现雪糕地球的使用示例详解

    Three.js实现雪糕地球的使用示例详解

    目录 前言 ThreeJS 基础——实现转动的球体 ThreeJS 纹理——实现转动的地球 交互式雪糕地球 添加 loading 效果 前言 最近的天气有几分酷热,去实验室的道路也有几分漫长,走着走着,小包感觉灵魂已经被热出窍了.回到实验室,把空调打开,雪糕吃上,静坐了几分钟,才重新感觉到灵魂的滋味,葛优躺在实验室的小床上,思维开始天马行空,世上有一万种方式能让小包凉快,但地球母亲呐,她却日渐炎热,谁能来给她降降温? 躺着躺着,进入了梦乡,小包梦到未来有一天,人类超级发达,可以穿梭时空,但发展的

  • JS实现简单的下雪特效示例详解

    JS实现简单的下雪特效示例详解

    目录 前言 主要实现代码 HTML代码 JS代码 前言 很多南方的小伙伴可能没怎么见过或者从来没见过下雪,今天我给大家带来一个小Demo,模拟了下雪场景,首先让我们看一下运行效果 可以点击看看在线运行http://haiyong.site/xiaxue 首先看看项目结构,一张雪花图片,一个.html文件和 jquery-1.4.2.js 用到的雪花图片我放在这里了,或者可以直接用我上传到自己网站上的图片地址:http://haiyong.site/wp-content/uploads/2021/

  • JS实现大数相加大数相乘示例详解

    目录 JS大数相加.大数相乘 一.实现两个大数相加 二.实现两个大数相乘 JS大数相加.大数相乘 JavaScript 只有一种数字类型,可以使用也可以不使用小数点来书写数字. 在 JavaScript 中,数字不分为整数类型和浮点数类型,所有的数字都是浮点数类型.JavaScript 采用 IEEE754 标准定义的 64 位浮点格式表示数字,此格式用 64 位存储数值.其中 0~51存储数字片段,52~62存储指数,63 位存储符号. 来看看 JavaScript 中数字的最大值和最小值:

  • JS实现简单的操作杆旋转示例详解

    目录 一.实现效果 二.组成部分 目标 三.代码实现 1.操作控制 2.dom对象操作类 3.用法 总结与思考 一.实现效果 JS 简单的操作杆旋转实现 首先说明一下,请直接忽略背景图,这里主要实现的是杆旋转控制方向盘旋转. 鼠标移出控制区域,控制球复位 二.组成部分 创建 ballOption.js 文件,用以绑定控制球指定 dom,并初始化相关操作 创建 eleOption.js 文件,用以实现一些频繁的 dom 操作 主要是通过鼠标滑动事件控制“控制球”位置更改及获取以屏幕上方向为0度的角

  • node.js中Util模块作用教程示例详解

    目录 从类型判断说起 严格相等 Error First & Promise 调试与输出 从类型判断说起 在 JavaScript 中,进行变量的类型校验是一个非常令人头疼的事,如果只是简单的使用 typeof 会到各种各样的问题. 举几个简单的: console.log(typeof null) // 'object' console.log(typeof new Array) // 'object' console.log(typeof new String) // 'object' 后来,大

  • Node.js实现分片上传断点续传示例详解

    目录 正文 文件的分片与合并 并发控制 使代码可复用 服务端接口实现 正文 大文件上传会消耗大量的时间,而且中途有可能上传失败.这时我们需要前端和后端配合来解决这个问题. 解决步骤: 文件分片,减少每次请求消耗的时间,如果某次请求失败可以单独上传,而不是从头开始 通知服务端合并文件分片 控制并发的请求数量,避免浏览器内存溢出 当因为网络或者其他原因导致某次的请求失败,我们重新发送请求 文件的分片与合并 在JavaScript中,FIle对象是' Blob '对象的子类,该对象包含一个重要的方法s

  • PHP设计模式之原型模式示例详解

    PHP设计模式之原型模式示例详解

    前言 原型模式其实更形象的来说应该叫克隆模式.它主要的行为是对对象进行克隆,但是又把被克隆的对象称之为最初的原型,于是,这个模式就这样被命名了.说真的,从使用方式来看真的感觉叫克隆模式更贴切一些. Gof类图及解释 GoF定义:用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象 GoF类图 代码实现 abstract class Prototype { public $v = 'clone' . PHP_EOL; public function __construct() { ech

  • 原生js中运算符及流程控制示例详解

    运算符 算数:+ 加.- 减.* 乘./ 除.% 求模 赋值:=.+=.-=.*=./=.%= 关系:>.<. >=. <=. ==. ===. !=. !== 逻辑:||或.&&与.!否 实例1.求模 window.onload = function(){ alert(0%2) //0 alert(1%2) //1 alert(2%2) //0 } 实例2.隔行变色 <body> <ol> <li>取模:就是求余数</li

随机推荐