Prototype之我的看法

 prototype

js 的对象比较

因为 js 是解释执行的语言, 那么再代码中出现函数与对象若是重复执行, 会建立多个副本

1. 在代码中重复执行的代码容易出现重复的对象
2. 建立一个 Person 构造函数, 以建立 对象. 要求有 name, age, gender 和 sayHello
3. 代码出现的错误

    // 1 function Person() { var o = {}; o.name = ... return o; } // 2 function Person () { name: .... age: .... ... }// 1 function Person() { var o = {}; o.name = ... return o; } // 2 function Person () { name: .... age: .... ... }

4. 传统的构造方法的定义方式会影响性能, 容易形成多个对象有多个方法副本. 应该讲方法单独抽取出来. 让全部的对象共享该方法.
5. 能够考虑将方法所有放到外面可是有安全隐患
   • 在开发中会引入各类框架或库. 自定义的成员越多, 出现命名冲突的概率越大
   • 可能在开发中会有多个构造函数. 每个构造函数应该有多个方法. 那么就会变得不容易维护.
6. 任意一个对象都会默认的连接到它的原型中
   • 建立一个函数. 会附带的建立一个特殊的对象. 该对象使用 函数.prototype 引用. 称其为函数的原型属性.
   • 每个由该函数做为构造函数建立的对象, 都会默认的链接到该对象上.
   • 在该对象访问某一个方法或属性的时候, 若是该对象中没有, 就会到这个神秘对象中去查找.

传统构造函数的问题

 function Foo() { this.sayHello = function () { } }function Foo() { this.sayHello = function () { } }

1. 因为对象是调用 new Foo() 所建立出来的. 所以每个对象在建立的时候, 函数 sayHello 都会被建立一次
2. 那么每个对象都含有一个独立的, 不一样的, 可是功能逻辑同样的函数. 好比: {} == {}
3. 在代码中方法就会消耗性能. 最典型的资源就是内存.
4. 这里最好的办法就是将函数体放在构造函数以外. 那么在构造函数中只须要引用该函数便可

    function sayHello () {} function Foo () { this.say = sayHello; }function sayHello () {} function Foo () { this.say = sayHello; }

5. 会在开发中变得困难: 引入框架危险, 代码繁冗很差维护. 解决办法就是外面的函数若是不占用名字. 并且在函数旗下就行了.
6. 每个函数在定义的时候, 有一个神秘对象被建立出来.
7. 每个由构造函数建立的对象都会默认的链接到该神秘对象上.

    var f1 = new Foo(); var f2 = new Foo(); f1.sayHello(); // 若是 f1 没有 sayHello, 那么就会在 Foo.prototype 中去找 f2.sayGoodBye(); // 若是 f2 没有改方法, 那么就会在 Foo.prototype 中去找var f1 = new Foo(); var f2 = new Foo(); f1.sayHello(); // 若是 f1 没有 sayHello, 那么就会在 Foo.prototype 中去找 f2.sayGoodBye(); // 若是 f2 没有改方法, 那么就会在 Foo.prototype 中去找

8. 由构造函数建立出来的众多对象共享一个对象, 就是 构造函数.prototype

9. 只须要将共享的东西, 重复会多占用内存的东西放到 构造函数.prototype 中, 那么全部的对象就能够共享了.

    function Foo() {} Foo.prototype.sayHello = function () { console.log( ... ); }; var f1 = new Foo(); f1.sayHello(); var f2 = new Foo(); f2.sayHello(); f1.sayHello === f2.sayHellofunction Foo() {} Foo.prototype.sayHello = function () { console.log( ... ); }; var f1 = new Foo(); f1.sayHello(); var f2 = new Foo(); f2.sayHello(); f1.sayHello === f2.sayHello

10. 练习: 写一个构造函数 Student, 要求有 name, age, gender, sayHello, study. 要求构造函数带参数.

常见错误

1. 写 构造函数.prototype 的时候, 将属性也加到里面.

    function Person() {} Person.prototype.name = '张三'; var p = new Person();function Person() {} Person.prototype.name = '张三'; var p = new Person();

2. 赋值的错误

    function Person() {} Person.prototype.name = '张三'; var p1 = new Person(); var p2 = new Person(); p1.name = '李四'; console.log( p1.name ); console.log( p2.name ); // 若是是访问数据, 当前对象中若是没有该数据就到构造函数的原型属性中去找 // 若是是写数据, 当对象中有该数据的时候, 就是修改值; 若是对象没有该数据, 那么就添加值function Person() {} Person.prototype.name = '张三'; var p1 = new Person(); var p2 = new Person(); p1.name = '李四'; console.log( p1.name ); console.log( p2.name ); // 若是是访问数据, 当前对象中若是没有该数据就到构造函数的原型属性中去找 // 若是是写数据, 当对象中有该数据的时候, 就是修改值; 若是对象没有该数据, 那么就添加值

原型相关的概念

1. 关于面向对象的概念
   • 类 class: 在 js 中就是构造函数
     • 在传统的面向对象语言中, 使用一个叫作类的东西定义模板. 而后使用模板建立对象.
     • 在构造方法中也具备相似的功能. 所以称其为类

       // 在 java 中, 最小的代码单位是 类 class Program { // 成员 }// 在 java 中, 最小的代码单位是 类 class Program { // 成员 }

   • 实例 ( instance ) 与对象 ( object )
     • 实例通常是指某一个构造函数建立出来的对象. 咱们成为 xxx 构造函数的实例
     • 实例就是对象. 对象是一个泛称.
     • 实例与对象是一个近义词
   • 键值对与属性和方法
     • 在 js 中键值对的集合称为对象
     • 若是值为数据( 非函数 ), 就称该键值对为属性 property
     • 若是值为函数( 方法 ), 就称该键值对为方法 method
   • 父类与子类
     • 传统的面向对象语言中使用类来实现继承. 那么就有父类, 子类的概念
     • 父类又称为基类, 子类又称为派生类
     • 在 js 中经常称为父对象, 子对象. 基对象, 派生对象.
2. 原型相关的概念
   • 神秘对象针对构造函数称为 "原型属性"
     • 神秘对象就是构造函数的原型属性
     • 简称原型
   • 神秘对象与构造函数所建立出来的对象也有必定关系
     • 关系是什么
     • 神秘对象针对构造函数建立出来的对象称为 "原型对象"
     • 简称原型
   • 对象继承自其原型
     • 构造函数建立的对象 继承自 构造函数的原型属性
     • 构造函数建立的对象 继承自 该对象的原型对象
     • 构造函数所建立出来的对象与构造函数的原型属性表示的对象是两个不一样的对象
       • 原型中的成员, 能够直接被实例对象所使用
       • 也就是说实例对象直接 "含有" 原型中的成员
       • 所以 实例对象 继承自 原型
       • 这样的继承就是 "原型继承"
3. 一些问题
   • {} 构造函数是什么?
   • 凡是字面量的对象都有构造函数
     • {} Object
     • [] Array
     • /./ RegExp
     • function ... Function

如何使用原型

为何使用原型?

1. 利用对象的动态特性
   • 构造函数.prototype.XXX = vvvv;
2. 利用直接替换

    Student.prototype = { sayHello: function () {}, study: function () {} };Student.prototype = { sayHello: function () {}, study: function () {} };