zoukankan      html  css  js  c++  java
  • 深入了解js的原型及原型链

      对比c++&&java等基于类的语言,JavaScript常常令人困惑,因为其是动态的,本身不提供一个class的实现,(ES6中的关键字class只属于一种语法糖,JavaScript仍然是基于原型的)。


      看完文章,应该掌握:

    1. __proto__
    2. prototype
    3. __proto__和prototype的关系
    4. 原型链的结构
    5. 原型对象的意义

    首先了解什么是原型?

      假设有一个对象cat,其构造函数为Animal

    1. 所有的引用类型(除了null)都有一个属性__proto__,是一个对象,称为隐式原型。(cat.__proto__)
    2. 引用类型的构造函数都有一个属性prototype,是一个对象,成为显式原型(Animal.prototype)
    3. 所有的引用类型的__proto__都指向其自身的构造函数的prototype属性,也就是cat.__proto__ === Animal.prototype
    4. prototype,为原型对象,对象有一个属性:constructor,即Animal.prototype.constructor === Animal
    5. prototype既然也是对象,那么其自然也有其构造函数,因此也还会有自身的原型对象,即Animal.prototype
    6. 实例对象一旦创建,便会自动引用原型对象中的属性和方法  

    原型链是什么?

        每个实例对象都有一个属性__proto__,指向其构造函数的原型对象(prototype),该原型对象也有其原型对象(__proto__),层层向上,直到一个对象的原型对象为null,null没有原型对象,作为原型链的最后一个环节。

        当试图得到对象中的一个属性时,假如对象中并不存在该属性,那么便会去它的原型对象中寻找,假如找不到,便会继续向其原型对象的原型对象找,直到到了最上层的null为止。

        我认为:原型对象可以看作是构造函数的补充,创建的实例对象会拥有构造函数内的属性和原型对象中属性的引用

              原型链

    原型对象的意义?

      用于存放所有对象实例的共享资源,可以节省内存。

    function Person(name,age){
        this.name = name;
        this.age = age;
        this.eat = function(){
            console.log(age + "岁的" + name + "在吃饭。");
        }
    }
    var p1 = new Person('xiaoming',18);
    var p2 = new Person('xiaoli',17);
    console.log(p1.eat === p2.eat);//输出false

      也就是说我们创建出来的每一个对象,里面都有独立的eat方法,这样将会占用很多的资源。

    function Person(name,age){
        this.name = name;
        this.age = age;
    }
    Person.prototype.eat = function(){
            console.log(age + "岁的" + name + "在吃饭。");
    }
    var p1 = new Person('xiaoming',18);
    var p2 = new Person('xiaoli',17);
    console.log(p1.eat === p2.eat);//输出true

      

  • 相关阅读:
    并发编程之多线程(理论部分)
    基于TCP和UDP的socket
    ajax笔记 显示出所城市名称 ShowCity.aspx Html代码
    蒸饭的纱布
    ajax 笔记--不刷新实现简单的留言版 guestBook
    从表的第几条取到第几条记录
    在asp.net添加数据到XML里去
    ajax 笔记-- 写了一个不用刷新就能实现--用户名验证的例子
    今天生日
    ajax 笔记不用刷新实现数据的分页显示
  • 原文地址:https://www.cnblogs.com/joeynkay/p/13442112.html
Copyright © 2011-2022 走看看