js中构造函数、实例、原型对象三者之间的关系-

最新推荐文章于 2024-02-02 21:55:20 发布

少年的舟

最新推荐文章于 2024-02-02 21:55:20 发布

阅读量379

点赞数 3

文章标签： javascript es6 html5

本文链接：https://blog.csdn.net/weixin_46113485/article/details/104803564

版权

在这里插入图片描述

index.html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    // 构造函数存在浪费内存的问题
    // // 1.利用new Object()创建对象；
    // var obj1 = new Object()
    //
    // // 2.利用 对象字母量创建对象
    // var obj2 = {}

    // 3.利用构造函数创建对象
    // 构造函数中的属性和方法我们称为成员，成员可以添加
    function Star(uname,age) {
        this.uname= uname;
        this.age = age
        this.sing = function () {
            console.log('我会唱歌');
        }
    }

    var ldh = new Star('刘德华',18)
    var zxy = new Star('张学友',20)
    // 1.实例成员就是构造函数内部通过this添加的成员 uname age sing 就是实例成员
    // 实例成员只能通过实例化的对象来访问
    console.log(ldh);
    console.log(zxy);
    ldh.sing();
    zxy.sing()
    // console.log(Star.sing()); 你可以通过构造函数来访问实例成员

    // 静态成员只能通过构造函数来访问
    Star.sex = '男'
    console.log(Star.sex);
    // ldh.sex  //不能通过访问

</script>
</body>
</html>

运行结果：
在这里插入图片描述
2.构造函数原型 prototype:
构造函数通过原型分配的函数是所有对象所共享
Javascript规定，每一个构造函数都有一个prototype属性，指向另外一个对象。注意这个prototype就是一个对象，这个对象的所有属性和方法，都会被构造函数所拥有
index.html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    function Strat(uname,age) {
        this.uname = uname;
        this.age = age
        // this.sing = function () {
        //     console.log('我会唱歌');
        // }
    }
    Strat.prototype.sing = function () {
        console.log('我会唱歌');
    }

    var ldh = new Strat('刘德华',18)
    var zxy = new Strat('张学友',20)
    console.log(ldh.sing()===  zxy.sing());;
   // 一般情况下，我们的公共属性定义到构造函数里面，公共的方法我们放在原型对象身上

 console.log(ldh); //对象身上系统自己添加一个——proto_指向我们构造函数的原型对象
    console.log(ldh.__proto__ === Strat.prototype);
    // 方法的查找规则：首先看ldy对象身上是否有sing方法，如果有就执行这个对象上的sing
    // 如果没有sing这个方法，因为有__proto__的存在，就其构造函数原型对象ptototype身上查找sing方法
</script>
</body>
</html>

运行结果：
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200311193554763.png
3.构造函数中的constructor:
index.html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>
<script>
    function Star(uname,age) {
        this.uname = uname;
        this.age = age
    }
    // Star.prototype.sing=function () {
    //     console.log('我要唱歌');
    // }
    // 很多情况下，我们需要手动的利用constructor 这个属性指回 原来的构造函数
    Star.prototype={
        // 如果我们修改了原来的原型对象，给原型对象赋值的是一个对象，则必须手动的利用constructor只会原型
        constructor:Star,
        sing:function () {
                console.log('我要唱歌');
            },
        dance:function () {
            console.log('我要跳舞');
        }
    }
        var ldh = new Star('刘德华',18)
        var zxy  = new Star('张学友',20)
        console.log(ldh.__proto__.constructor)
        console.log(Star.prototype.constructor)
</script>