您的位置: 首页  >  IT文章  >  JS面向对象之原型 面向对象之原型 为什么要使用原型 传统构造函数的问题 原型使用注意点 原型相关概念 如何使用原型 proto 继承 静态成员和实例成员 构造函数 与 原型 与 构造函数创建的实例对象 的关系 属性搜索原则( 就近原则 )

JS面向对象之原型 面向对象之原型 为什么要使用原型 传统构造函数的问题 原型使用注意点 原型相关概念 如何使用原型 proto 继承 静态成员和实例成员 构造函数 与 原型 与 构造函数创建的实例对象 的关系 属性搜索原则( 就近原则 )

分类: IT文章 • 2022-06-10 11:23:20

为什么要使用原型

由于 js 是解释执行的语言, 那么在代码中出现的函数与对象, 如果重复执行, 那么会创建多个副本, 消耗更多的内存, 从而降低性能

传统构造函数的问题

    function Foo( ... ){
        this.name = name;
        this.age = age;
        this.sayHello = function(){
            ...
        }
    }
  1. 由于对象是由 new Foo() 创建出来的, 因此每一个对象在创建的时候, 函数 sayHello 都会被创建一次
  2. 每一个对象都含有一个对立的, 不容的, 但是功能逻辑一样的函数, 应该将单独的方法抽取出来, 让所有的对象共享该方法
  3. 使用传统方法的定义方式会影响性能, 在代码中创建方法就是消耗性能, 比如说内存
  4. 可以考虑将方法全部放到外面, 但是可能存在安全隐患
    • 在开发中会引入各种框架和库, 自定义的成员越多, 出现命名冲突的几率越大
    • 在开发中可能会存在多个构造函数, 每一个构造函数应该会有多种方法, 方法越多就越不容易维护
    function sayHello(){}
    function Foo(){
        this.sayHello = sayHello;
    }
  1. 每一个函数在创建的时候, 都会创建一个原型对象
  2. 任意一个对象都会默认链接到他的原型中
    • 只要创建一个函数, 就会附带创建一个特殊的对象, 这个对象使用函数.prototype引用, 这个特殊的对象是这个函数的原型属性
    • 每一个由这个函数作为构造函数创建的对象, 都会默认链接到这个对象上( proto )
    • 在该对象访问某一个成员( 方法或属性 ), 如果该对象中没有, 那么就会到这个原型对象中去查找
    var f1 = new Foo();
    var f2 = new Foo();
    f1.sayHello();    // 如果 f1 没有 sayHello, 那么就会在 Foo.prototype 中去找
    f2.sayHello();    // 如果 f2 没有改方法, 那么就会在 Foo.prototype 中去找
  1. 由构造函数创建出来的多个对象会共享一个原型对象, 就是 构造函数.prototype
  2. 合理解决办法: 将共享的, 重复使用会多消耗性能的东西放到 构造函数.prototype 中, 那么所有由这个构造函数创建的对象就可以共享这些成员
    function Foo() {}
    Foo.prototype.sayHello = function () {
        console.log( ... );
    };
    var f1 = new Foo();
    f1.sayHello();
    var f2 = new Foo();
    f2.sayHello();

    f1.sayHello === f2.sayHello

原型使用注意点

  1. 写 构造函数.prototype 的时候, 最好不要将属性也加到里面.
    function Person() {}
    Person.prototype.name = '张三';
    var p = new Person();
  1. 赋值的错误
    • 如果是访问数据, 当前对象中如果没有该数据就到构造函数的原型属性中去找
    • 如果是写数据, 当对象中有该数据的时候, 就是修改值; 如果对象没有该数据, 那么就添加值
    function Person() {}
    Person.prototype.name = '张三';
    var p1 = new Person();
    var p2 = new Person();
    p1.name = '李四';

    console.log( p1.name );
    console.log( p2.name );

原型相关概念

面向对象的相关概念

类 class : 在 js 中就是构造函数

* 在传统的面向对象语言中( c, java ), 使用一个叫做类的东西定义模板, 然后使用模板创建对象
* 在构造方法中也具有类似功能, 叫做类

实例( instance ) 与对象( Object )

* 实例一般是指摸一个构造函数创建出来的对象, 叫做 XXX 构造函数的实例对象
* 实例就是对象, 对象是一个泛称
* 实例与对象是一个近义词

键值对与属性和方法

* 在 js 中, 键值对的集合被叫做对象
* 如果值为数据( 非函数 ), 就称该键值对为属性 property
* 如果值为函数( 方法 ), 就称该键值对为方法 method

父类( 基类 )和子类( 派生类 )

* 传统的面向对象的语言中使用类来实现继承, 那么就有父类, 子类
* 父类又称为基类, 子类有称为派生类
* 在 js 中, 常常被称为扶对象, 子对象, 基对象, 派生对象

原型的相关概念

原型对象相对于构造函数被称为原型属性 

* 原型对象就是构造函数的**原型属性**
* 简称原型

原型对象与构造函数所创建的实例对象也有联系

* 原型对象相对于构造函数创建的实例对象称为**原型对象**
* 简称原型

对象继承自原型

* 构造函数创建的实例对象 继承自 构造函数的原型属性( 构造函数.prototype )
* 构造函数创建的实例对象 继承自 该对象的原型对象
* 构造函数创建的实例对象与构造函数的原型属性表示的对象是两个不同的对象
    * 原型中的成员, 可以直接被实例对象调用
    * 实例对象 "*含有*" 原型中的成员
    * 实例对象 继承自 原型
    * 这样的继承就是 "原型继承"

构造函数是什么

* 凡是对象都有构造函数
    * {}  => Object
    * []  => Array
    * /./ => Regexp
    * function...  => Function

如何使用原型

  1. 使用对象的动态特性
    • 构造函数.prototype.XXX = vvv;
  2. 直接替换
    function Person() {}
    Person.prototype = {
        constructor: Person
    };

    // 拆解
    function Person() {}
    var o = {};
    o.costructor = Person; // 属性中就存储着函数的地址

    Person.prototype = o;

    Person = 123;

这两种使用方法的区别

  1. 原型指向发生了变化
  2. 构造函数所创建的对象所继承的原型不同
  3. 新增的对象默认是没有 constructor 属性
    注意: 在使用替换的方式修改原型的时候, 一般都会添加 constructor 属性

proto

  1. 以前访问原型, 必须使用构造函数才能实现, 无法直接使用实例对象来访问原型
  2. firefox 最早引入了__proto__属性, 来表示使用实例对象引用原型, 早期是非标准的
  3. 通过__proto__属性可以允许使用实例对象直接访问原型
    function Person() {}
    // 原型对象就是 Person.prototype
    // 那么只有使用 构造函数 才可以访问它
    var o = new Person();
    // 以前不能直接使用 o 来访问神秘对象
    // 现在有了 __proto__ 后
    // o.__proto__ 也可以直接访问原型对象( 两个下划线 )
    // 那么 o.__proto__ === Person.prototype
  1. 原型对象中默认都有一个属性 constructor , 构造器 , 将该原型和该原型的构造函数联系起来
  2. __proto__的作用
    • 访问原型
    • 在开发中除非特殊需求, 不建议使用实例对象去修改原型的成员, 该属性使用较少
    • 在调试过程中比较方便, 可以轻易的访问原型, 从而查看成员
  3. 间接访问原型的方法
    var o = new Person();
    o.constructor.prototype;
  1. 给实例对象继承自原型的属性进行赋值
    function Foo() {}
    Foo.prototype.name = 'test';
    var o1 = new Foo();
    var o2 = new Foo();
    o1.name = '张三'; // 不是修改原型中的 name 而是自己增加了一个 name 属性
    console.log( o1.name + ', ' + o2.name );

继承

  1. 最简单的继承就是 将别的对象的属性加到这个对象身上, 那么这个对象就有这个成员了
  2. 利用原型也可以实现继承, 不需要在这个对象身上添加任何成员, 只要原型有, 实例对象也有
  3. 所以将属性和方法等成员利用 混入 的办法, 加到构造函数的原型上, 那么构造函数的实例就都具有这些属性和方法了

静态成员和实例成员

  1. 静态成员表示的是 静态方法 和 静态属性, 静态就是由 构造函数提供的
  2. 实例成员表示的是 实例方法 和 实例属性, 实例就是由 构造函数创建的实例对象
  3. 一般情况下, 工具方法都是由 静态成员 提供, 与实例对象有关的方法由 实例成员 表示

构造函数 与 原型 与 构造函数创建的实例对象 的关系

    function Person(name){
           this.name = name;
   }
    var P1 = new Person('Jim');

JS面向对象之原型 面向对象之原型 为什么要使用原型 传统构造函数的问题 原型使用注意点 原型相关概念 如何使用原型 proto 继承 静态成员和实例成员 构造函数 与 原型 与 构造函数创建的实例对象 的关系 属性搜索原则( 就近原则 )

属性搜索原则( 就近原则 )

  1. 所谓的属性搜索原则, 就是对象在访问属性与方法的时候, 首先在当前对象中查找
  2. 如果当前对象中存储在属性或方法, 停止查找, 直接使用该属性与方法
  3. 如果对象没有改成员, 那么再其原型对象中查找
  4. 如果原型对象含有该成员, 那么停止查找, 直接使用
  5. 如果原型还没有, 就到原型的原型中查找
  6. 如此往复, 直到直到 Object.prototype 还没有, 那么就返回 undefied.
  7. 如果是调用方法就包错, 该 xxxx 不是一个函数

相关推荐