• 原型链的理解


    先给出个栗子吃

    function Person(name){
        this.name = name;
    }
    Person.prototype.sayName = function(){
        console.log('My name is :' + this.name);
    }
    var p = new Person("KK")
    p.sayName();
    

    我们解释下 Personpprototypeprotoconstructor之间的关系哦

    1. Person是构造函数,pPerson的一个实例
    2. 所有的对象都有__proto__属性,只有函数有prototype
    3. 每个函数都有自己的原形对象 prototype, 而prototype中有__proto__constructor, constructor顾名思义就是构造函数,__proto__就是是实例的原型链
    4. 在实例中,__proto__可看做是key,prototype可看做是value。xxx.proto === yyy.prototype

    那么,在这个栗子中,可以得出这么些结论:

    1. Person.prototype.constructor == Person //true
    2. p.__proto__ === Person.prototype //true
    3. Person.prototype.__proto__ === Object.prototype //true
    4. Object.prototype.constructor == Object,
    5. Object.prototype.__proto__ == null
    

    原型链的概念理解:

    使用一个构造函数创造一个实例对象,在此对象上调用相应的属性和方法时,JS存在一个搜索机制,首先查找它本身有没有,如果没有,则顺着__ proto__这个指针去找它的构造函数的原型上有没有,如果没有,再顺着原型的__ proto__ 向上去找,也就是说,只要存在__ proto__ 这个指针,在没有找到对应的属性与方法时,查找不会停下,直到没有__ proto__ 为止,这样的一种形式可行的结构基础就叫** 原型链 **。

    再给张图就更完美了:

    关于原型的其他知识点

    instanceOf

    作用:用来检测一个对象的类型
    instanceof 运算符用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性
    A instanceof B

    表示A的的原型链中是否存在 B.prototype : 有就return true,反之return false

    function Car(make, model, year) {
      this.make = make;
      this.model = model;
      this.year = year;
    }
    var mycar = new Car("Honda", "Accord", 1998);
    var a = mycar instanceof Car;   
    // 返回 true  var b = mycar instanceof Object; // 返回 true
    
    
    var simpleStr = "This is a simple string";
    var myString  = new String();
    simpleStr instanceof String; 
    // returns false, 检查原型链会找到 undefined,simpleStr不是对象
    myString  instanceof String; 
    // returns true
    

    Object.create()

    Object.create() 方法使用指定的原型对象和其属性创建了一个新的对象
    语法:Object.create(proto, [ propertiesObject ])
    //第一个参数为一个对象,应该是新创建的对象的原型。
    作用: 创建一个新的对象,第一层原型链指向对应的参数

    var a = {'age': 20}
    var b = {'name':'Jack'}
    b = Object.create(a)
    b.__proto__ === a //true  
    
  • 相关阅读:
    【Web自动化测试——代码篇五】常用方法——鼠标键盘事件
    【Web自动化测试——代码篇四】常用方法——常见元素操作
    【Web自动化测试——代码篇三】常用方法——控制浏览器
    【Web自动化测试——代码篇二】条条大路找元素
    【Web自动化测试——代码篇一】简单的Web自动化脚本
    ON DUPLICATE KEY UPDATE 当记录不存在时插入,当记录存在时更新
    Replace INTO与INSERT INTO的不同之处
    JS 实现 Tab标签切换功能
    SQL LEFT JOIN 关键字
    php面向对象_get(),_set()的用法
  • 原文地址:https://www.cnblogs.com/frontman/p/7275779.html
Copyright © 2020-2023  润新知