在js中是没有类的，今天就在想一个问题在js中如何实现继承
然后在网上看到一个方法引起了 我对js原型链的兴趣 然后就去了解了下
首先来实现一个构造函数
function Person(name){
this.name = 'wale';
this.speak = function(){
console.log('my name is'+this.name);
}
}
Person.prototype.legs = 'two';
//实例化对象
var wale = new Person('wale');
我们先理解下new干了什么吧 能接下来跟好的理解prototype
- 创建一个类的实例：创建一个空对象obj，然后把这个空对象的___proto____设置为Person.prototype(即构造函数的prototype)；
- 初始化实例：构造函数Person被传入参数并调用，关键字this被设定指向该实例obj;
- 返回实例obj。
所以 实例化后
wale.name = 'wale';
wale.legs = 'two';
在这里提一点 如果 在函数体内 this.name = 'wale' 又在外面实现了 Person.prototype.name = 'unkonwn' 那么实例化后 wale.name 为 ‘wale’ 原因也可以从 new 3部曲的执行先后得出 2步骤 会把 1步骤 的覆盖
简单了讲下new的实现过程,在这里又引出个问题prototype又是什么呢？
个人理解为prototype是解决父类属性共享的一种办法
function Person(name){
this.name = 'wale';
this.speak = function(){
console.log('my name is'+this.name);
}
}
var a = Person('a');
var b = Person('b');
a和b的父类都是Person
a 和 b 都有讲出自己名字的speak方法 但他们的speak都是实例属性属于各自的 其实是可以共享的 这样可以更节省内存
所以
Person.prototype.speak = function(){
console.log('my name is'+this.name);
};
实例化 a和b 后 他们的speak方法 都是从 Person.prototype 映射过来的指向同个地址 这样就实现了共享属性 叫做原型属性 我喜欢叫他类属性。。。a.name 叫做实例属性
讲完prototype(原型) 来讲下原型链吧对象的属性和方法
由于原型对象本身对于对象实例来说也是对象，它也有自己的原型，所以形成了一条原型链（prototype chain）。比如，a对象是b对象的原型，b对象是c对象的原型，以此类推。所有一切的对象的原型顶端，都是Object.prototype，即Object构造函数的prototype属性指向的那个对象。
当然，Object.prototype对象也有自己的原型对象，那就是没有任何属性和方法的null对象，而null对象没有自己的原型。
console.log(Object.getPrototypeOf(Object.prototype)); //null
console.log(Person.prototype.isPrototypeOf(wale)) //true
原型链（prototype chain）的特点有：
a：读取对象的某个属性时，JavaScript引擎先寻找对象本身的属性，如果找不到，就到它的原型去找，如果还是找不到，就到原型的原型去找。如果直到最顶层的Object.prototype还是找不到，则返回undefined。
b：如果对象自身和它的原型，都定义了一个同名属性，那么优先读取对象自身的属性，这叫做“覆盖”（overiding）。
c：一级级向上在原型链寻找某个属性，对性能是有影响的。所寻找的属性在越上层的原型对象，对性能的影响越大。如果寻找某个不存在的属性，将会遍历整个原型链。
再扯一下prototype的constructor
prototype对象有一个constructor属性，默认指向prototype对象所在的构造函数。
console.log(A.prototype.constructor===A) //true
当然 ___proto____也有一个constructor属性
要注意的是，prototype是构造函数的属性，而constructor则是构造函数的prototype属性所指向的那个对象，也就是原型对象的属性。注意不要混淆。
function A(){};
console.log(A.hasOwnProperty('prototype')); //true
console.log(A.prototype.hasOwnProperty('constructor')); //true
var a = new A();
a.___proto____.constructor = A.prototype.constructor = A;
我猜这就是instanceof函数来实现的方式吧
好了 最后贴出 引起我对这些感兴趣 的 实现类继承的 方式吧
父类
function Animal (name) {
// 属性
this.name = name || 'Animal';
// 实例方法
this.sleep = function(){
console.log(this.name + '正在睡觉！');
}
}
这个会初始化2次 父类的实例化属性 在执行的时候 有点浪费内存
function Cat(name){
Animal.call(this);
this.name = name || 'Tom';
}
Cat.prototype = new Animal();
//修复下指向哦不然 Cat 就是Animal()了
Cat.prototype.constructor = Cat;
// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); // true
及其改进版 （砍掉父类的实例属性，这样，在调用两次父类的构造的时候，就不会初始化两次实例方法/属性）
function Cat(name){
Animal.call(this);
this.name = name || 'Tom';
}
(function(){
// 创建一个没有实例方法的类
var Super = function(){};
Super.prototype = Animal.prototype;
//将实例作为子类的原型
Cat.prototype = new Super();
})();
//修复下指向哦不然 Cat 就是Animal()了
Cat.prototype.constructor = Cat;
// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); //true
网友评论