JavaScript原型与原型链

最新推荐文章于 2021-12-17 18:11:56 发布

花帜

最新推荐文章于 2021-12-17 18:11:56 发布

阅读量298

点赞数

分类专栏： JavaScript 文章标签：函数 prototype javascript 对象原型-原型链

本文链接：https://blog.csdn.net/Yana_li/article/details/52766267

版权

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

什么是原型？

原型是js中非常特殊一个对象，当一个函数创建之后，会随之就产生一个原型对象，当通过这个函数的构造函数创建一个具体的对象之后，在这个具体的对象中就会有一个属性指向原型。

下面我们先来一段代码演示下用Prototype原型来创建对象的过程：

//创建一个Person对象，第一种状态
function Person(){

}
//给对象赋值，使用原型来给对象赋值，属性和方法都放在了该对象的原型中，外界无法访问。第二种状态
Person.prototype.id=00;
Person.prototype.name="liyanan";
Person.prototype.age=13;
Person.prototype.sex="女";
Person.prototype.say=function(){
   console.log("my id is :"+this.id+",name is :"+this.name+",age is :"+this.age+",sex is :"+this.sex);
}

//创建一个Person对象，第三种状态
var p1=new Person();
p1.say();//返回my id is :00,name is :liyanan,age is :13,sex is :女

//创建一个新的Person对象，并且在自己的内部赋值，第四种状态
var p2=new Person();
p2.id=01;
p2.name="lh";
p2.age=13;

p2.say();//返回my id is :01,name is :lh,age is :13,sex is :女

原型的内存模型图如下：

这里写图片描述

原型的重写：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            function Person() {

            }

            var p1 = new Person();

            Person.prototype.sayHello = function() {
                console.log("我的名字是："+this.name+",我今年"+this.age+"岁了");
            }

                      p1.sayHello();

            Person.prototype = {
                constructor:Person,//手动指向Person
                name : "liyanan",
                age : 13,
                say : function() {
                    console.log("我的名字是："+this.name+",我今年"+this.age+"岁了");
                }
            }

            var p2 = new Person();
            console.log(p2.name);//liyanan
            p2.name = "lyn";
            p2.age = 15;
            console.log(p2.name);//lyn
            p1.sayHello();//此时找不到name和age，但是代码正确
            p2.say();//正确

//          p1.say();//错误，因为原型重写了
//          p2.sayHello();//错误
        </script>
    </head>
    <body>
    </body>
</html>

此时的内存模块图：

这里写图片描述

花帜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript原型与原型链

什么是原型？原型是js中非常特殊一个对象，当一个函数创建之后，会随之就产生一个原型对象，当通过这个函数的构造函数创建一个具体的对象之后，在这个具体的对象中就会有一个属性指向原型。下面我们先来一段代码演示下用Prototype原型来创建对象的过程：//创建一个Person对象，第一种状态function Person(){}//给对象赋值，使用原型来给对象赋值，属性和方法都放在了该对象的原型中，外
复制链接

扫一扫

专栏目录