js原型和原型链以及原型继承

最新推荐文章于 2024-08-17 12:54:01 发布

薪之助

最新推荐文章于 2024-08-17 12:54:01 发布

阅读量134

点赞数 4

文章标签： javascript 原型模式开发语言

本文链接：https://blog.csdn.net/weixin_72718348/article/details/126146851

版权

一、原型（prototype）

特点：

        每个函数都有一个prototype属性，也就是显示原型，默认指向一个object空对象。

        原型对象中有一个属性constructor,它是指向函数对象。

        可以给原型对象添加方法或者属性。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    // 所有函数都有原型对象
    // 构造函数访问原型对象  prototype ---存放公共方法
    // 实例对象访问原型对象  __proto__ ---存放公共方法
    // constructor         构造方法 (原型对象创建的构造函数)

    function Person(uname,age,sex){ //构造函数
        this.uname = uname;
        this.age = age;
        this.sex = sex;
    }

    Person.prototype.fn = function(){// 原型对象上的方法
        console.log("这是原型对象上的方法");
    }

    console.log("原型对象---  prototype",Person.prototype);

    //实例化对象
    let p = new Person("张三",18,"男");
    let p1 = new Person("李四",18,"男");
    let p2 = new Person("王五",18,"男");

    console.log(Person.prototype === p.__proto__);
    console.log(Person.prototype.constructor === Person);

</script>
</html>

运行结果：

原型对象就相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象，我们可以将对象中共有的内容，统一设置到原型对象中。

二、原型链

当我们使用一个对象的属性或方法时，会现在自身中寻找，
自身中如果有，则直接使用，
如果没有则去原型对象中寻找，如果原型对象中有，则使用，
如果没有则去原型的原型中寻找，直到找到Object对象的原型。
Object的原型没有原型，如果在Object原型中依然没有找到，则返回undefined。

图解：

三、原型继承

方法：

利用原型及原型链实现继承【面向对象】

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    //利用原型及原型链实现继承【面向对象】

    //父构造函数
    function Father(name,age,sex){
        //指向创建它的实例化对象
        this.name = name;
        this.age = age;
        this.sex = sex;
    }
    // Father构造函数的原型对象上的公共方法
    Father.prototype.money = function(){
        //原型对象上的this  指向 调用它的实例对象
        console.log(this.name+"-----在挣钱");
    }


    //子构造函数
    function Son(name,age,sex,email){

        //使用 call() 立即调用父类方法，并传递参数【继承父类属性】
        Father.call(this,name,age,sex);

        //子类 自身属性
        this.email = email;
    }

    //通过new将父构造函数的实例对象赋值给son的原型对象
    Son.prototype = new Father();
    //利用constructor手动改变Son的原型对象的指向的构造函数
    Son.prototype.constructor = Son;

    //在son的原型对象上添加game方法
    Son.prototype.game = function(){
        console.log(this.name+"-----在玩游戏");
    }

    let f = new Father("张三",28,"男");
    let s = new Son("张老大",7,"女","13152448308@163.com");

    console.log(f,s);

    f.money();
    s.money();
  
    s.game();
</script>
</html>

代码图解：

运行结果：

薪之助

关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js原型和原型链以及原型继承

每个函数都有一个prototype属性，也就是显示原型，默认指向一个object空对象。原型对象中有一个属性constructor,它是指向函数对象。可以给原型对象添加方法或者属性。利用原型及原型链实现继承【面向对象】原型对象就相当于一个。...
复制链接

扫一扫