JavaScript原型和原型链——构造函数

Stella981
• 阅读 664

一、instanceof:判断引用类型(数组、对象、函数)的变量是由哪一个 构造函数 派生出来的。(o instanceof Object)

二、原型规则和示例

  1、所有的引用类型(数组、对象、函数),都具有对象特性,可以自由扩展属性(除了 "null“ 以外)。

  2、所有的引用类型(数组、对象、函数),都具有__proto__属性(隐式原型),且__proto__属性的值是一个普通的对象。

  3、所有的 函数 ,都有一个 prototype 属性(显式原型),且 prototype 属性的值也是一个普通的对象。

  4、所有的引用类型(数组、对象、函数),__proto__属性值指向其构造函数的 prototype 属性值。

  5、当试图得到一个对象的某个属性时,如果这个对象本身没有这个属性,那么会去它的__proto__(即它的构造函数的 prototype)中寻找。

三、描述 new 一个对象的过程

  1、创建一个新对象(空对象)

  2、将构造函数的作用域赋给新对象(因此 this 就指向了这个新对象)

  3、执行构造函数中的代码(为这个新对象添加属性,即对 this 赋值)

  4、返回新对象(返回 this)

  代码示例:

function File(name,type){
    this.name = name;
    this.type = type;
    this.state = 1;
    return this;                            
}
var js = new File("构造函数","JavaScript");

四、写一个原型链继承的例子

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>原型链继承--封装DOM查询的例子</title>
    <style type="text/css" media="all">
        body{
            width: 500px;
            margin: 100px auto;
        }
        div{
            background: #ddd;
        }
    </style>
  </head>
  <body>
    <div id="div1">DIV1</div>
    <div id ="div2">DIV2</div>
    <script type="text/javascript" charset="utf-8"> 
        //通过DOM节点的Id名返回DOM对象,类似jquery的 $("#Id")      
        function Elem(id){
            this.elem = document.getElementById(id);
        }
     //获取或修改DOM节点的内容,类似jquery的 $("#Id").html()
        Elem.prototype.html = function(val){
            var e = this.elem;
            if(val){
                e.innerHTML = val;
                return this;
            }else{
                return e.innerHTML;
            }
        }
     //为DOM节点绑定事件,类似jquery的 $("#Id").on("click",function(...))      
        Elem.prototype.on = function(type,fn){
            var e = this.elem;
            e.addEventListener(type,fn);
            return this;
        }
        //点击div1,修改div2内容
        var div1 = new Elem("div1");
        var div2 = new Elem("div2");
        div1.on("click",function(){
            div2.html("Hello world");
        })
    </script>
  </body>
</html>
点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
ZY ZY
3年前
js继承的几种方式
1.原型链继承原型链继承:想要继承,就必须要提供父类(继承谁,提供继承的属性)//父级functionPerson(name)//给构造函数添加参数this.namename;this.age10;this.sumfunction()console.log(this.name)//原
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
5个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
菜园前端 菜园前端
1年前
前端学习重点-原型与原型链
原文链接:什么是原型?每一个函数都包含一个prototype属性,这是一个指针指向"原型对象"(prototypeobject),也就是我们平时说的原型。每一个函数都包含不同的原型对象。当将函数用作构造函数的时候,新创建的对象(实例)会从原型对象上继承属性
Stella981 Stella981
3年前
JavaScript学习总结(十七)——Javascript原型链的原理
一、JavaScript原型链ECMAScript中描述了原型链的概念,并将原型链作为实现继承的主要方法。其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。在JavaScript中,用__proto__属性来表示一个对象的原型链。当查找一个对象的属性时,JavaScript会向上遍历原型
可莉 可莉
3年前
23.JavaScript原型和原型链
1.原型:prototype,所有的函数都有一个属性prototype,称之为函数原型默认情况下,prototype是一个普通的Object对象默认情况下,prototype中有一个属性constructor,它也是一个对象,它指向构造函数本身functionTest(){}Test.prototype:函数Test的原型Test.pr
Stella981 Stella981
3年前
JS 对象数组Array 根据对象object key的值排序sort,很风骚哦
有个js对象数组varary\{id:1,name:"b"},{id:2,name:"b"}\需求是根据name或者id的值来排序,这里有个风骚的函数函数定义:function keysrt(key,desc) {  return function(a,b){    return desc ? ~~(ak
Stella981 Stella981
3年前
HIVE 时间操作函数
日期函数UNIX时间戳转日期函数: from\_unixtime语法:   from\_unixtime(bigint unixtime\, string format\)返回值: string说明: 转化UNIX时间戳(从19700101 00:00:00 UTC到指定时间的秒数)到当前时区的时间格式举例:hive   selec
Wesley13 Wesley13
3年前
Java8 方法引用的使用
一、方法引用分类1.构造函数2.静态方法3.实例方法(类型)4.实例方法(对象)二、方法引用构造函数ClassName::new,示例:/@authorKevin@date20170124/pub