A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本帖最后由 小鲁哥哥 于 2018-3-2 14:02 编辑

【济南校区】前端就业班笔记服务器与Ajax:day03

对象的原型链
凡是对象都有原型
构造函数 Person 创建的对象 p 有原型 Person.prototype
Person.prototype 是对象. 它有原型吗?
问题:
1) 原型是什么?
2) 原型既然是对象, 那么如何是个头?        
结论
1) Person.prototype 是 实例 p 的原型对象, 使用 __proto__ 可以访问对象的原型对象
2) Person.prototype 的 原型对象是 Person.prototype.__proto__
3) Person.prototype.__proto__ 里的 constructor 是 Object. 所以Person.prototype.__proto__ 就是 Object.prototype
4) Object.prototype.__proto__ 是 null. 因此表明 Object.prototype 就是顶级.
链式
p --> Person.prototype( p.__proto__ ) --> Object.prototype --> null
系统内置的原型链
[] --> Array.prototype --> Object.prototype --> null
/./ --> RegExp.prototype --> Object.prototype --> null


绘制数组的原型结构
var arr = [];
// 等价
var arr = new Array();
arr --> Array.prototype --> Object.prototype --> null

练习:根据下面代码绘制对象的原型链结构
[JavaScript] 纯文本查看 复制代码
        1)         function Person( name, age, gender ) {
                        this.name = name;
                        this.age = age;
                        this.gender = gender;
                }
                function Student () {}


                Student.prototype = new Person( '张三', 19, '男' );


                var stu = new Student();


        2)  function Person() {}
                var p1 = new Person();
                var p2 = new Person();

{} 对象的原型链结构
在 js 中 对象 一般都有
字面量123, '123'
数组: []
正则表达式对象: /./
函数: function () {}
...


对象也有字面量: {}
{} --> Object.prototype --> null
注意: {} 与 new Object() 含义相同


动态函数 Function
动态函数就是在运行的过程中, 将一段字符串作为代码运行. 由于字符串可以随意的拼接. 因此得到动态的执行.
定义动态函数, 并执行
使用 Function 构造函数, 创建函数.Function 是一个构造函数. new Function 得到 一个函数
语法
new Function( arg0, arg1, ..., argN, body )
Function 的所有的参数, 除了最后一个以外, 都是生成的函数的参数最后一个参数是 函数体

函数的相关的一些参数
arguments 凡是函数调用, 都会默认含有一个 arguments 对象. 可以将其看做为 "数组". 里面存储着调用时
传入的所有参数. 可以使用数组的索引访问这些参数.
例如: 写一个函数, 在参数中写任意个参数, 最后求其和
[JavaScript] 纯文本查看 复制代码
                        function sum () {
                                // 所有的参数都会存储到 arguments 中
                                var sum = 0;
                                for ( var i = 0; i < arguments.length; i++ ) {
                                        sum += arguments[ i ];
                                }
                                return sum;
                        }

                案例:         extend( o )  => 将 o 混入到当前对象 this 中
                                extend( o1, o2 ) => 将 o2 混入到 o1 中

函数名.length, 即函数的 length 属性. 表示 定义函数时, 参数的个数
如果定义函数的时候, 定义了参数. 但是调用的时候又没有传递该参数. 那么该参数在函数内就是 undefined
函数.name 返回的是函数名

函数的引用 callee 与 caller
        js 中函数也是一个对象
        -> callee 在函数的内部, 它表示 当前函数 的引用
        -> caller 表示调用函数的

eval 函数
eval 函数与 Function 功能类似. eval 可以直接将字符串作为代码来执行.
语法:eval( 语句字符串 )
注意, 它与当前代码处于同一个作用域

使用 ajax 获得 json 格式的字符串后, 转换成对象
        
在 js 中 函数 是 Function 的实例
function Person() {}
var p = new Person();
p 是 构造函数 Person 的实例
在 该角度去看, 函数就是对象, Function 就是构造函数
得到 构造-实例-原型 三角形
function Person() {} 为例

instanceof 运算符
a of b -> b 的 a
instance of ?
错觉: 判断某一个对象是否为某一个构造函数所创建出来的

通过原型链的学习, 可以重新定义 js 的继承
js 的继承: 就是利用对象的动态特性添加成员, 或直接替换对象的方式修改原型链结构. 使得当前对象的原型链上的对象具有某些成员. 那么我的当前对象
就可以使用这些成员了.
p -> Person.prototype -> Object.prototype -> null
p -> Person.prototype -> {} -> Object.prototype -> null
过多的依赖原型链继承, 会损耗 性能
如果必须使用原型链继承, 最好提供一些快速访问的方法


如果你想了解更多黑马课程请点击这里,如果你想加入黑马这个大家庭学习先进技术,广交天下好友!
黑马程序员济南中心联系电话:0531-55696830

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马