深入理解js——继承

时间:2023-03-09 05:47:02
深入理解js——继承

JavaScript中继承是通过原型链来体现的。

function Foo(){}

var f1=new Foo();

f1.a=10;

Foo.prototype.a=100;

Foo.prototype.b=200;

console.log(f1.a);//10

console.log(f1.b);//200

f1是Foo函数new出来的对象,f1.a是f1对象的基本属性,f1.b是怎么来的呢?——从Foo.prototype得来,因为f1.__proto__指向的是Foo.prototype。

访问一个对象的属性时,先在基本属性中查找,如果没有,再沿着__proto__这条链向上找,这就是原型链。

那么问题来了,在实际应用中如何区分一个属性到底是基本的还是从原型中找到的呢?hasOwnProperty,特别是在for…in…循环中,一定要注意。

function Foo(){}                                               function Foo(){}

var f1=new Foo();                var f1=new Foo();

f1.a=10;                     f1.a=10;

Foo.prototype.a=100;                                        Foo.prototype.a=100;

Foo.prototype.b=200;                                       Foo.prototype.b=200;

var item;                    var item;

for(item in f1){                                               for(item in f1){

  console.log(item);//a b                                    if(f1.hasOwnProperty(item)){

}                                                                             console.log(item);//a

                             }

                          }

但是f1的这个hasOwnProperty方法是从哪里来的, f1本身没有,Foo.prototype中也没有,哪儿来的?它是从Object.prototype中来的。

深入理解js——继承

对象的原型链是沿着__proto__这条线走的,因此在查找f1.hasOwnProperty属性时,就会顺着原型链最终找到Object.prototype。当然也可以自定义函数和对象来实现自己的继承。

说一个函数的例子。我们知道每个函数都有call,apply方法,都有length,arguments,caller等属性。为什么每个函数都有?这肯定是“继承”的。函数由Function函数创建,因此继承的Function.prototype中的方法。

深入理解js——继承

那怎么还有hasOwnProperty呢?——那是Function.prototype继承自Object.prototype的方法。