function Person() {}; Person.prototype.extend = function ( o ) { for ( var k in o ) { this[ k ] = o[ k ]; } }; Person.prototype.extend({ run: function () { console.log( '我能跑了' ); }, eat: function () { console.log( '我可以吃了' ); }, sayHello: function () { console.log( '我吃饱了' ); } });
6.2 原型继承利用原型也可以实现继承,不需要在我身上添加任何成员,只要原型有了我就有了。
6.3 借用构造函数继承这种技术的基本思想相当简单,即在子类型构造函数的内部调用超类型构造函数,而函数只不过是在特定环境中执行代码的对象,因此通过使用apply()和call()方法也可以在(将来)新创建的对象上执行构造函数
function Person ( name, age, gender ) { this.name = name; this.age = age; this.gender = gender; } // 需要提供一个 Student 的构造函数创建学生对象 // 学生也应该有 name, age, gender, 同时还需要有 course 课程 function Student ( name, age, gender, course ) { Person.call( this, name, age, gender ); this.course = course; }
在《JavaScript高级程序设计(第三版)》中详细介绍了继承的6种方式
七、函数的四种调用模式 7.1 函数模式就是一个简单的函数调用。函数名的前面没有任何引导内容。
function foo () {} var func = function () {}; ... foo(); func(); (function () {} )();
this 的含义:在函数中 this 表示全局对象,在浏览器中式 window
7.2 方法模式方法一定式依附与一个对象,将函数赋值给对象的一个属性,那么就成为了方法。
function f() { this.method = function () {}; } var o = { method: function () {} }
this 的含义:这个依附的对象
7.3 构造器调用模式创建对象的时候构造函数做了什么?由于构造函数只是给 this 添加成员,没有做其他事情。而方法也可以完成这个操作,就是 this 而言,构造函数与方法没有本质的区别。
特征:
使用 new 关键字,来引导构造函数。
构造函数中的 this 与方法中的一样,表示对象,但是构造函数中的对象是刚刚创建出来的对象
构造函数中不需要 return ,就会默认的 return this。
如果手动添加return ,就相当于 return this
如果手动的添加 return 基本类型,无效,还是保留原来 返回 this
如果手动添加的 return null,或 return undefined ,无效
如果手动添加 return 对象类型,那么原来创建的 this 就会被丢掉,返回的是 return 后面的对象
7.4 上下文调用模式上下文就是环境。就是自己定义设置 this 的含义。
语法
函数名.apply( 对象, [ 参数 ] );
函数名.call( 对象, 参数 );
描述
函数名就是表示函数本身,使用函数进行调用的时候默认 this 是全局变量
函数名也可以是方法提供,使用方法调用的时候,this 是指向当前对象
使用 apply 进行调用后,无论是函数还是方法都无效了,我们的 this ,由 apply 的第一个参数决定
参数问题
无论是 call 还是 apply 在没有后面的参数的情况下(函数无参数,方法五参数)是完全一致的
function foo(){ console.log( this ); } foo.apply( obj ); foo.call( obj );
第一个参数的使用也是有规则的:
如果传入的是一个对象,那么就相当于设置该函数中的 this 为参数
如果不传入参数,或传入 null、undefined 等,那么相当于 this 默认为 window
foo(); foo.apply(); foo.apply( null );
如果传入的是基本类型,那么 this 就是基本类型对应的包装类型的引用
在使用上下文调用的时候,原函数(方法)可能会带有参数,那么这个参数再上下文调用中使用 第二个(第 n 个)参数来表示
function foo( num ) { console.log( num ); } foo.apply( null, [ 123 ] ); // 等价于 foo( 123 );
参考资料
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:测试上述代码运行效果。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》