iOS 顶部高斯模糊导航栏 + 页面内容穿越底部导航栏效果

 先上代码说明

KevLinDev.extend = function(subClass, baseClass) {
function inheritance() {}
inheritance.prototype = baseClass.prototype;
subClass.prototype = new inheritance();
subClass.prototype.constructor = subClass;
subClass.baseConstructor = baseClass;
subClass.superClass = baseClass.prototype;
}

function Employee(first, last, id) {
// initialize properties here
}

KevLinDev.extend(Employee, Person);

  1、We need the subClass.prototype property to be equivalent to baseClass.prototype. But we won't write like this:

  subClass.prototype = baseClass.prototype

 cause we can't allow both the subClass.prototype and the baseClass.prototype to point to the same prototype object. That would mean adding methods to one class would add it to the other. So that's why we define a nested function called "inheritance". Remember, when we call "new" that prototype property will be copied to the new instance's private prototype, thus hooking up its inheritance chain.

 

2、we create a new instance of "inheritance" and assign that to the subClass prototype. Now when we create a new instance of subClass, the instance's private prototype will point to the "inheritance" instance. The "inheritance" instance's private prototype points to the base class' public prototype. This means that changes to baseClass.prototype will propagate to subclass instances through the inheritance chain and since we created a new object for the subclass' prototype property, we can add to subClass.prototype without affecting the base class prototype.

 

3、Whenever you create a new object instance in JavaScript, the instance's local "constructor" property points to the function (constructor) that was invoked to create the instance. I often compare an instance's constructor property against a function to test the "type" of an object instance. Calling "new inheritance()" points subClass.prototype.constructor to the nested "inheritance" function which would break my tests. I fix this by updating the constructor property to point to my subClass constructor.

 

4、The final two lines are used as convenience properties when invoking ancestor constructors and methods.

 

How to use:

function Person(first, last) {
this.first = first;
this.last = last;
}
Person.prototype.toString = function() {
return this.first + " " + this.last;
};

function Employee(first, last, id) {
Employee.baseConstructor.call(this, first, last);
this.id = id;
}
KevLinDev.extend(Employee, Person);
// var emp = new Employee('ding','wei','01');
// alert(emp.toString()); 此时emp通过prototype chain,toString引用的是Person里定义的，所以当然不会输出id的值
// output ding wei
Employee.prototype.toString = function() {
return Employee.superClass.toString.call(this) + ": " + this.id;
};
// 经过这一步骤（可以理解为覆写了toString方法），再执行toString时，就会输出id值了
// output ding wei : 01
// 回想下extend里那个内嵌函数inheritance的定义，如果我们直接subClass.prototype = baseClass.prototype，再执行person.toString()，看看会有什么变化

function Manager(first, last, id, department) {
Manager.baseConstructor.call(this, first, last, id);
this.department = department;
}
KevLinDev.extend(Manager, Employee);
Manager.prototype.toString = function() {
return Manager.superClass.toString.call(this) + ": " + this.department;
};

 

总结一下：

1、想把代码的英文说明翻译过来，但总觉得不到位，还是暂时看英文的来得明白

2、extend所接受的参数是什么？不要被subClass等名字搞混了，JS里没有类的概念，而是通过function来模拟类的定义，因此这里传的参数实际就是函数引用

3、function中公开的prototype属性是什么？实际上它的值就是个普通的对象引用。那这个对象有什么属性呢？这么说吧，Person.prototype.toString1 = function(){};  Person.prototype.toString2 = function(){};那么Person的prototype就具有toString1和toString2两个属性。

4、extend方法主要就是搭起prototype这条链。把Person中prototype的每个属性拷贝到Employee的prototype里，这样当创建Employee实例时，这些实例就能访问到定义在Person中prototype里的属性。具体参见JavaScript对象模型

 

原文Kevin Lindsey的inheritance prototye，参考sp42的JavaScript“类”继承横向比较