美文网首页
原型与原型链

原型与原型链

作者: happystory | 来源:发表于2018-06-21 22:50 被阅读0次

原型规则

  1. 所有的引用类型(数组、对象、函数), 都具有对象特性,即可自由扩展属性。
  2. 所有的引用类型(数组、对象、函数), 都有一个__proto__属性,属性值是一个普通对象。
  3. 所有的函数,都有一个prototype属性,属性值也是一个普通的对象。
  4. 所有的引用类型(数组、对象、函数), __proto__属性值指向它的构造函数的prototype属性值。
  5. 当试图得到一个对象的某个属性时,如果这个对象本身没有这个属性,那么会去它的__proto__(即它的构造函数的prototype)中寻找。

f instanceof Foo的判断逻辑

f__proto__一层一层往上,能否对应到Foo.prototype

判断数组

Array.isArray(arr)
Object.prototype.toString.call(arr) === "[object Array]"

描述new一个对象的过程

  1. 创建一个新对象
  2. this指向这个新对象
  3. 执行代码,即对this赋值
  4. 返回this

原型DEMO

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="div1">32434</div>
  <script>
      function Elem(qs) {
        this.elem = document.querySelector(qs)
      }
    
      Elem.prototype.html = function(val) {
        var elem = this.elem
        if(val) {
          elem.innerHTML = val
          return this
        } else {
          return elem.innerHTML
        }
      }

      Elem.prototype.on = function(type, fn) {
        var elem = this.elem
        elem.addEventListener(type, fn)
      }
    
      var div1 = new Elem('#div1')
      console.log(div1.html())
      div1.html('我被改了啊').on('click', function() {
        alert('clicked')
      })
    </script>
</body>
</html>

相关文章

  • JavaScript 原型、原型链与原型继承

    原型,原型链与原型继承 用自己的方式理解原型,原型链和原型继承 javascript——原型与原型链 JavaSc...

  • 2019-01-28

    原型与原型链

  • 廖雪峰JS小记

    (function(){})() 原型,原型链 浅谈Js原型的理解JS 原型与原型链终极详解 对象 对象:一种无序...

  • Javascript(三)之原型继承理解

    进阶路线 3 原型继承 3.1 优秀文章 最详尽的 JS 原型与原型链终极详解 一 最详尽的 JS 原型与原型链终...

  • JavaScript 面向对象第一篇

    1.原型链 ---- (实例对象与原型之间的连接 叫做原型链) 2. hasOwnproperty ----(看是...

  • 原型与原型链以及继承

    今天复习下原型与原型链的知识,以及记录新学的继承知识点。 知识点纲要 原型与原型链 es5与es6继承 什么是原型...

  • JavaScript深入理解this关键字(一)

    摘要 最近在公司需要做培训,我打算把JavaScript中的原型与原型链讲给大家。但我在梳理原型与原型链的时候发现...

  • js_继承及原型链等(四)

    js_继承及原型链等(三) 1. 继承 依赖于原型链来完成的继承 发生在对象与对象之间 原型链,如下: ==原型链...

  • 原型链&instanceof关键字

    1.原型链&instanceof关键字 简单说明 原型链 与 instanceof 作用原理 1.原型链 1...

  • 原型、原型链

    (什么是原型、原型链?有什么作用) JavaScirpt深入之从原型到原型链 图解 Javascript 原型链 ...

网友评论

      本文标题:原型与原型链

      本文链接:https://www.haomeiwen.com/subject/bmzcyftx.html