webkit中的javascript(2)----javascript的prototype 和 constructor

最新推荐文章于 2024-08-31 09:58:49 发布

zevolo

最新推荐文章于 2024-08-31 09:58:49 发布

阅读量973

点赞数

分类专栏： webkit 文章标签： prototype constructor javascript webkit inheritance function

本文链接：https://blog.youkuaiyun.com/zevolo/article/details/8014018

版权

webkit 专栏收录该内容

8 篇文章

订阅专栏

本文探讨了JavaScript中的原型和构造函数概念，以及它们如何用于实现类的继承。通过具体示例展示了如何利用prototype和constructor属性来定义和继承类型。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

browser的javascript，严格的说，不算是webkit的本身内容

#########################################################################################

by zevolo

在webkit中看到有很多prototype和constructor，看了一下javascript的相关概念
javascript要实现类的继承，没有像c++和java定义类别，而是采用了prototype和constructor的方式，使用了function来实现
一个类型的prototype包含着构造这个类型的方法(prototype.construtor)，如同c++中的类型，而javascript的函数则相当于c++中的类型的构造函数而已
一个类的具体实例没有prototype，只有定义(函数，类型)有。
下面是一个例子
function Foo(name){
   console.log("foo is called");
   this.name = name;
}
function Boo(age) {
//   this.constructor = arguments.callee;
   console.log("boo is called");
   this.age = age;
}

var a = new Foo("a");
c = Boo.constructor;
console.log("Boo's prototype is " + typeof(Boo.prototype) + ":" + Boo.prototype + ":==a?:" + (Boo.prototype === a) + ";Boo 's construtor is " + Boo.constructor);
Boo.prototype = a;
console.log("Boo's prototype is " + typeof(Boo.prototype) + ":" + Boo.prototype + ":==a?:" + (Boo.prototype === a) + ";Boo 's construtor is " + Boo.constructor + ":==original?" + (c === Boo.constructor));

var b = new Boo("10");
console.log("Boo 's prototype's prototype is " + Boo.prototype.prototype);

console.log("a 's construtor is " + a.constructor);
console.log("b 's construtor is " + b.constructor);
console.log("b.name is " + b.name);
b.constructor("haha");
console.log("b.name is " + b.name);

javascript使用了prototype链来实现继承，如上。但是这里有一个问题，就是b的constructor变成Foo，而实际运行的时候运行的是Boo。
一个解释是当new的时候，首先会设置实例的constructor，然后再调用原来的构造函数来初始化。（以后再调用constructor，就是不同的一个了）
这里更好的一个做法是，在Boo中重新设置constructor，如上的注释的部分

参考：
http://www.ruanyifeng.com/blog/2011/06/designing_ideas_of_inheritance_mechanism_in_javascript.html
http://blog.endlesscode.com/2010/01/23/javascript-prototype-chain/
http://handyxuefeng.blog.163.com/blog/static/454521722011519104115831/

#########################################################################################