继承
mixin混合继承
function mixin(obj1, obj2) {for (var key in obj2) {//重复不复制if (!(key in obj1)) {obj1[key] = obj2[key];}}return obj1;}
这种复制是浅复制,对象或者数组函数等都是同一个引用,改变obj1的会同时影响obj2。
寄生继承
...
隐式继承
子类调用fn.call(this)
深拷贝需要重新声明一个变量(对象),遍历(递归)复制,详情见我的函数技巧,不贴出来了。
原型
Javascript对象中有一个特殊的[[prototype]]内置属性,其实就是对于其他对象的引用。几乎所有的对象在创建时[[prototype]]属性都会被赋予一个非空的值。
var f = {a: 1};// 创建一个对象 原型为fvar f2 = Object.create(f);// 通过原型链找到了属性aconsole.log(f2.a);
使用for..in遍历对象的原理和原型链类似,任意可枚举在原型链上的属性都会被遍历。使用in操作符检查属性时也会查找对象原型链,无论是否可枚举。
所有普通对象的原型最终指向Object.prototype。
详细讲解一个对象赋值语句:
var obj = {};obj.a = 1;
这里有四种情况:
1、obj中存在a属性,就会被修改。
var obj = {a: 2};obj.a = 1;console.log(obj.a); //1
2、obj的原型链不存在a属性,就会被直接添加到obj上。
var obj = {};console.log('a' in obj); //falseobj.a = 1;console.log(obj.a); //1
3、obj与obj的原型链都存在a属性,就会发生屏蔽,obj中的a会屏蔽原型链上的a。
var obj2 = {a: 2};var obj = Object.create(obj2);obj.a = 1;console.log(obj.a); //1
4、obj的原型链上存在a属性,而obj不存在时,会出现多种情况。
在原型链上存在a属性且没有被标记为只读,那就会直接在obj添加一个a属性。(情况3)
在原型链上存在a属性且被标记为只读,那么无法创建该属性,严格模式会报错,普通模式赋值语句会被忽略。
// 在'use strict'模式下// Cannot assign to read only property 'a' of object '#<Object>'var obj2 = {};Object.defineProperty(obj2, 'a', {value: 2,configurable: true,enumerable: true,writable: false})var obj = Object.create(obj2);obj.a = 1; //无效console.log(obj.a); //2
如果在原型链上存在a并且它是一个setter,那就一定会调用这个setter。a不会被添加到obj,也不会重新定义setter。
var obj2 = {set a(val) {console.log(1);}};var obj = Object.create(obj2);obj.a = 1; // 执行set并输出1
如果希望怎么样都添加属性,请使用Object.defineProperty(...)。
关于prototype
所有函数默认都会拥有一个名为prototype的公有不可枚举属性,它会指向另外一个对象:
function fn() {console.log(1);}console.log(fn.prototype); //Object{}
这个对象通常被称为fn的原型,实际上不如叫fn.prototype。
function fn() {console.log(1);}var f = new fn();console.log(f.__proto__ === fn.prototype); //true
在调用new fn()时,会创建一个对象,并给一个内部[[prototype]]链接,连接到fn.prototype。个人感觉__proto__这个浏览器私有实现的属性叫原型比较好,毕竟原型链是通过这个属性向上查找的。
实际上,new操作符实际上并没有直接创建关联,这只是一个副作用。
通过Object.create()方法才是正规创建原型链接的方法。
上一段代码很容易让人认为fn是一个构造函数,因为这里用new来调用它并构造出一个对象。
实际上,fn和普通的函数没有区别。函数本身不是构造函数,当在普通的函数前面加上new时,就会把这个函数调用变成了一个‘构造函数调用’。实际上,new会劫持所有普通函数并用构造形式来调用它。
考虑下面一段代码。
function fn(a) {this.a = a;}fn.prototype.getA = function() {return this.a;}var f1 = new fn(1);var f2 = new fn(2);console.log(f1.getA()); //1console.log(f2.getA()); //2
这段代码展示了两种面向类的技巧:
1、this.name=name给每个对象都绑定了.name属性。
2、fn.prototype.getA=...给原型添加了一个方法,现在,每一个实例都可以调用getA方法。
看起来,似乎创建f1、f2时会把对象复制到这两个新对象中,然而实际上只是通过原型链向上查找调用了方法而已。
关于constructor
function fn1() {};var f1 = new fn1();console.log(f1.constructor === fn1); //true//替换默认原型function fn2() {};fn2.prototype = {};var f = new fn2();console.log(f.constructor === fn2); //falseconsole.log(f.constructor === Object); //true
当前用新对象替换fn原型时,new出来的新对象不会自动获得constructor属性。所以,不能说因为f.constructor===fn属性,就认为fn构造了对象f。
实际上,new出来的对象f并没有.constructor属性,它会委托原型去查找该属性,默认的原型(fn.prototype)有construtor属性并且指向fn,所以f.constructor(实际上调用的是fn.prototype.constructor)会指向fn。但是如果替换了fn.prototype,新的原型对象并不会默认有.construtor,于是委托会一直提交到Object.prototype,恰好Object.prototype.constructor===Object,结果也在上面代码中展示出来了。
可以手动给新原型添加constructor属性:
function fn2() {};fn2.prototype = {};fn2.prototype.constructor = fn2; //修正原型链var f = new fn2();console.log(f.constructor === fn2); //trueconsole.log(f.constructor === Object); //false
看,修复了!(实际上应该用Object.defineProperty来定义constructor,因为该属性应该是不可枚举的)
所以说,constructor并不是一个不可变属性,它只是默认不可枚举,但是值可以被任意修改。
原型继承
常见误用形式和正确使用方式:
function fn1() {};function fn2() {};//不可以 只是复制引用//fn1.prototype = fn2.prototype;//可以实现 但是会执行fn2函数 可能出现额外问题//fn1.prototype=new fn2;//ES6前 需要抛弃fn1默认的prototype 可能还要修正constructor属性fn1.prototype = Object.create(fn2.prototype);//ES6语法 直接修正默认prototypeObject.setPrototypeOf(fn1.prototype, fn2.prototype);
如何找出任意对象的原型链呢?有一个方法是instanceof。
function fn() {}var f = new fn;console.log(f instanceof fn); //true
instanceof操作符左边是一个对象,右边是一个函数。该操作解决的问题是:在f的原型链上,是否有fn.prototype对象?(通过bind强绑生成的函数没有prototype属性)
如果要直接判断两个对象是否存在原型关系,可以用以下几个方法:
function fn() {}var f = new fn;//是否是原型关系console.log(fn.prototype.isPrototypeOf(f)); //true//展示原型console.log(Object.getPrototypeOf(f)); //Object{}//浏览器私有实现console.log(f.__proto__); //Object{}
绝大多数浏览器支持__proto__方法来访问[[prototype]]属性。(__开头的属性表明这不是ECMA标准,还有很多其他的属性也以__开头)
现在ES6可以用Object.getPrototypeOf()与Object.setPropertyOf()来获取和设置原型,相当于原生支持了__proto__。
Object.create()会创建一个对象,并关联到参数对象中,避免了new操作符与生成对应的constructor,prototype。
如果旧浏览器不支持,可以用下面的代码模拟:
if (!Object.create) {Object.create = function(o) {function f() {};f.prototype = o;return new f();}}
关于new操作符和原型,如果下面的代码可以理解,那就没问题了~
function fn(a) {this.a = a;}fn.prototype = {};Object.defineProperty(fn.prototype, 'a', {value: 1,configurable: true,enumerable: true,writable: false});//严格模式new会报错var f = new fn(3);console.log(f); //无效!console.log(f.a); //1
完结撒花!