zoukankan      html  css  js  c++  java
  • JS三座大山再学习 ---- 原型和原型链

    本文已发布在西瓜君的个人博客,原文传送门
    ## 前言

    西瓜君之前学习了JS的基础知识与三座大山,但之后工作中没怎么用,印象不太深刻,这次打算再重学一下,打牢基础。冲鸭~~

    原型模式

    JS实现继承的方式是通过原型和原型链实现的,JS中没有类(此处指ES5,ES6中加上了class语法糖)

    每个函数都有prototype(原型)属性,这个属性是一个指针,指向一个对象,这个对象的用途是包含特定类型的所有实例共享的属性和方法,即这个原型对象是用来给实例共享属性和方法的。
    而每个实例内部都有一个指向原型对象的指针(proto)。

    5个原型规则

    1. 所有引用类型(数组、对象、函数),都具有对象特性,及可自由扩展属性
    举个栗子
    var obj = {
        name:'波妞'
    }
    console.log(obj)     // { name: '波妞' }
    obj.like = '宗介'
    console.log(obj)      // { name: '波妞', like: '宗介' }
    1. **所有的引用类型都有一个__proto__属性,属性值是一个普通对象**
      例子
    2. 所有的函数都有一个prototype属性,属性值是一个普通对象
    3. **所有的引用类型的__proto__指向它构造函数的prototype属性值**
    4. **当试图获取一个对象的某个属性时,如果这个对象本身没有这个属性,那么他会去它的__proto__(即它构造函数的prototype)去找**

    原型链

    理解:每一个引用类型都有__proto__,每一个函数都有prototype,引用类型的__proto__与它构造函数的prototype指向同一个对象;调用引用类型时,如果其本身并没有调用的方法或属性,就会去__proto__(也就是它构造函数的prototype)去找,没有的话会继续找prototype的__proto__,到顶级Object的原型指向null为止

    function Foo (name, age) {
        this.name = name
    }
    
    Foo.prototype.print = function () {
        console.log(this.name)
    }
    
    var f = new Foo('波妞')
    f.print()   //    波妞

    原型链继承示意图


    原型链继承的小栗子

    function Elem(id) {
        this.elem = document.getElementById(id)
    }
    
    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())

    如有错误,请斧正

    以上

    出处:https://www.cnblogs.com/bloglixin/p/11912011.html

  • 相关阅读:
    经典sql面试题(学生表_课程表_成绩表_教师表)
    69道Spring面试题及答案
    Spring常见面试题
    Java基础面试题及答案(六)
    Java基础面试题及答案(五)
    maven工程,java代码加载resources下面资源文件的路径
    oracle的事务级别
    JMeter测试HBase
    JMeter测试clickhouse
    JMeter入门
  • 原文地址:https://www.cnblogs.com/mq0036/p/11970918.html
Copyright © 2011-2022 走看看