JS面向对象之原型链

JS 面向对象之原型链

对象的原型链

1. 只要是对象就有原型
2. 原型也是对象
3. 只要是对象就有原型, 而且原型也是对象, 所以只要定义了一个对象, 那么就能够找到他的原型, 如此反复, 就能够构成一个对象的序列, 这个结构就被成为原型链
4. 原型链到哪里是一个头?
5. 一个默认的原型链结构是什么样子的?
6. 原型链结构对已知语法结构有什么修正?

原型链的结构

1. 原型链继承就是利用就是修改原型链结构( 增长、删除、修改节点中的成员 ), 从而让实例对象可使用整个原型链中的全部成员( 属性和方法 )
2. 使用原型链继承必须知足属性搜索原则

属性搜索原则

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

原型链结构图

1. 构造函数 对象原型链结构图

function Person (){};
    var p = new Person();

1. {} 对象原型链结构图
   

2. [] 数组原型链结构图
   

3. Object.prototype 对应的构造函数
   

4. div 对应的构造函数

5. div -> DivTag.prototype( 就是 o ) -> Object.prototype -> null

var o = {
    appendTo: function ( dom ) {
    }
};
function DivTag() {}
DivTag.prototype = o;

var div = new DivTag();

函数的构造函数 Function

在 js 中 使用 Function 能够实例化函数对象. 也就是说在 js 中函数与普通对象同样, 也是一个对象类型( 很是特殊 )

1. 函数是对象, 就可使用对象的动态特性
2. 函数是对象, 就有构造函数建立函数
3. 函数是函数, 能够建立其余对象(函数的构造函数也是函数)
4. 函数是惟一能够限定变量做用域的结构

函数是 Function 的实例

new Function( arg0, arg1, arg2, ..., argN, body );

1. Function 中的参数所有是字符串
2. 该构造函数的做用是将 参数连接起来组成函数

• 若是参数只有一个, 那么表示函数体
• 若是参数有多个, 那么最后一个参数表示新函数体, 前面的全部参数表示新函数的参数
• 若是没有参数, 表示建立一个空函数

建立一个打印一句话的函数

// 传统的
    function foo () {
        console.log( '你好' );
    }
    // Function
    var func = new Function( 'console.log( "你好" );' );
    // 功能上, 这里 foo 与 func 等价

建立一个空函数

// 传统
    function foo () {}
    // Function
    var func = new Function();

传入函数内一个数字, 打印该数字

// 传统
    function foo ( num ) {
        console.log( num );
    }
    // Function
    var func = new Function ( "num" ,"console.log( num );" );
    func();

利用 Function 建立一个函数, 要求传入两个数字, 打印其和

var func = new Function( 'num1', 'num2', 'console.log( num1 + num2 );' );

练习: 利用 Function 建立一个函数, 要求容许函数调用时传入任意个数参数, 而且函数返回这些数字中最大的数字.
练习: 利用 Function 建立一个求三个数中最大数的函数.

// 传统
    function foo ( a, b, c ) {
        var res = a > b ? a : b;
        res = res > c ? res : c;
        return res;
    }
    // Function
    var func = new Function( 'a', 'b', 'c', 'var res = a > b ? a : b;res = res > c ? res : c;return res;' )

解决代码太长的办法:

1. 利用 加法 链接字符串

var func = new Function( 'a', 'b', 'c',
            'var res = a > b ? a : b;' +
            'res = res > c ? res : c;' +
            'return res;' );

1. 利用字符串特性( 刚学 )

function foo ( a, b, c ) {
        var res = a > b ? a : b;
        res = res > c ? res : c;
        return res;
    }
    var func = new Function( 'a', 'b', 'c', 'return foo( a, b, c );' );

1. ES6 的语法( 少浏览器实现 )
   • 使用 键盘左上角的 左单引号 表示可换行字符串的界定符
2. (最终)利用 DOM 的特性完成该方法

arguments 对象

arguments 是一个伪数组对象. 它表示在函数调用的过程当中传入的全部参数的集合.
在函数调用过程当中没有规定参数的个数与类型, 所以函数调用就具备灵活的特性, 那么为了方便使用,
在 每个函数调用的过程当中, 函数代码体内有一个默认的对象 arguments, 它存储着实际传入的全部参数.

js 中函数并无规定必须如何传参

1. 定义函数的时候不写参数, 同样能够调用时传递参数
2. 定义的时候写了参数, 调用的时候能够不传参
3. 定义的时候写了一参数, 调用的时候能够随意的传递多个而参数

在代码设计中, 若是须要函数带有任意个参数的时候, 通常就不带任何参数, 全部的 参数利用 arguments 来获取.
通常的函数定义语法, 能够写成:

function foo ( /* ... */ ) {
    }

利用 Function 建立一个函数, 要求容许函数调用时传入任意个数参数, 而且函数返回这些数字中最大的数字.

function foo ( ) {
        // 全部的参数都在 arguments 中. 将其当作数组使用
        // 问题而已转换成在有一个数组中求最大值
        var args = arguments;
        var max = args[ 0 ];
        for ( var i = 1; i < args.length; i++ ) {
            if ( max < args[ i ] ) {
                max = args[ i ];
            }
        }
        return max;
    }

练习: 利用 Function 写一个函数, 要求传入任意个数字 求和

函数的原型链结构

任意的一个函数, 都是至关于 Function 的实例. 相似于 {} 与 new Object() 的关系

function foo () {};
    // 告诉解释器, 有一个对象叫 foo, 它是一个函数
    // 至关于 new Function() 获得一个 函数对象

1. 函数有 __proto__ 属性
2. 函数的构造函数是 Function
3. 函数应该继承自 Function.prototype
4. Fucntion.prototype 继承自 Object.protoype
5. 构造函数有prototype, 实例对象才有__proto__指向原型, 构造函数的原型才有 constructor 指向构造函数

intanceof

array instanceof Array 判断 构造函数 Array 的原型 是否在 实例对象 array 的原型链存在