Javascript原型链

最新推荐文章于 2025-11-24 03:12:01 发布

原创最新推荐文章于 2025-11-24 03:12:01 发布 · 136 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

Web前端专栏收录该内容

13 篇文章

订阅专栏

本文通过具体实例详细介绍了JavaScript中的原型链工作原理，包括构造函数、原型对象及属性访问原则，并展示了复杂的继承关系。

以一段代码认识原型链。

//Animal构造函数
function Animal(name){
    this.name = name;
}
//Animal原型对象
Animal.prototype = {
    id:"Animal",
    sleep:function(){
        alert("sleep");
    }
}
 
var dog = new Animal("旺才");
alert(dog.name);//旺才
alert(dog.id);//Animal
dog.sleep()//sleep

其对应的简易内存分配结构图：

FireFox中可以访问[[Prototype]]，名字为__proto__，因为Mozilla将它公开了。

属性访问原则：

使用obj.propName访问一个对象的属性时，按照下面的步骤进行处理(假设obj的内部[[Prototype]]属性名为__proto__):
1. 如果obj存在propName属性，返回属性的值，否则
2. 如果obj.__proto__为null，返回undefined，否则
3. 返回obj.__proto__.propName

更加复杂的例子：

//Animal构造函数
function Animal(name){
    this.name = name;
}
//Animal原型对象
Animal.prototype = {
    id:"Animal",
    sleep:function(){
        alert("sleep");
    }
}
 
function Human(name,age){
    Animal.call(this,name);
    this.age = age;
}
 
Human.prototype = new Animal();
Human.prototype.id = "Human";
 
Human.prototype.say = function(){
    alert("hello everyone,My name is "+this.name +",I'm "+this.age+" and I'm a "+this.id);
}
 
//Human相关调用
var jxl = new Human('笨蛋',25);
alert(jxl.name);//笨蛋
alert(jxl.id);//Human
jxl.say();//hello everyone,My name is 笨蛋,I'm 25 and I'm a Human
 
alert(Animal.prototype.isPrototypeOf(jxl));//true
alert(Object.prototype.isPrototypeOf(jxl));//true

内存图：