这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
JavaScript 和其它面向对象语言一样,对象类型采用引用方式。持有对象的变量只是一个地址,而基本类型数据是值。当原型上存储对象时,就可能有一些陷阱
JavaScript 默认采用原型继承。虽然没有类 (class) 的概念,它的函数 (function) 可以充当构造器 (constructor)。构造器结合 this,new 可以构建出类似 Java 的类。因此,JavaScript 通过扩展自身能模拟类式(class-based) 继承。
JavaScript 和其它面向对象语言一样,对象类型采用引用方式。持有对象的变量只是一个地址,而基本类型数据是值。当原型上存储对象时,就可能有一些陷阱。
先看第一个例子
- var create = function() {
- function Fn() {}
- return function(parent) {
- Fn.prototype = parent
- return new Fn
- }
- }()
- var parent = {
- name: 'jack',
- age: 30,
- isMarried: false
- }
- var child = create(parent)
- console.log(child)
create 工具函数实现了一个基本的原型继承,每次调用 create 都会根据 parent 对象去复制一个新对象,新对象全部的属性都来自于 parent。这里 parent 有三个属性,都是基本数据类型:字符串,数字,布尔。
这时修改 child 看看会不会影响 parent
- child.name = 'lily'
- child.age = 20,
- child.isMarried = true
- console.log(child)
- console.log(parent)
结果如下
即修改 child 不会影响到 parent。
再看看另外一个例子
- var create = function() {
- function Fn() {}
- return function(parent) {
- Fn.prototype = parent
- return new Fn
- }
- }()
- var parent = {
- data: {
- name: 'jack',
- age: 30,
- isMarried: false
- },
- language: ['Java']
- }
- var child = create(parent)
- child.data.name = 'lily'
- child.data.age = 20
- child.data.isMarried = true
- child.language.push('javascript')
- console.dir(child)
- console.dir(parent)
注意这里的 parent 的两个属性 data,language 都是引用类型,一个是对象,一个是数组。child 仍然继承与 parent,随后修改了 child,结果如下
可以看到,此时 parent 也被修改了,和 child 的 name,age 等都一样了。这是使用原型继承时需要注意的。
使用继承时比较好的方式是:
1,数据属性采用类式继承(挂在 this 上),这样 new 时也可以通过参数配置
2,方法采用原型继承,这样能节省内存,同时子类重写方法也不会影响父类
下面是一个满足以上 2 点的写类工具函数
- /**
- * @param {String} className
- * @param {String/Function} superCls
- * @param {Function} factory
- */
- function $class(name, superClass, factory) {
- if (superClass === '') superClass = Object
- function clazz() {
- if (typeof this.init === 'function') {
- this.init.apply(this, arguments)
- }
- }
- var p = clazz.prototype = new superCls
- clazz.prototype.constructor = clazz
- clazz.prototype.className = className
- var supr = superCls.prototype
- window[className] = clazz
- factory.call(p, supr)
- }
对象类型放在父类原型上时务必小心子类修改其,这时继承于该父类的所有子类的实例都将被修改。而这造成的 bug 很不容易发现。
ES5 中加入了一个新 API 用来实现原型继承:Object.create。可以用它替代上面自实现的 create 函数,如下
- var parent = {
- name: 'jack',
- age: 30,
- isMarried: false
- }
- var child = Object.create(parent)
- console.log(child)
来源: http://www.phperz.com/article/17/0416/278042.html