构造函数和原型链

最新推荐文章于 2022-07-21 19:23:26 发布

鲁kk

最新推荐文章于 2022-07-21 19:23:26 发布

阅读量111

点赞数

文章标签： javascript html html5 es6

本文链接：https://blog.csdn.net/weixin_45905955/article/details/117588193

版权

本文介绍了JavaScript中创建对象的三种方式，特别是通过构造函数和自定义构造函数。讨论了构造函数创建对象可能导致的内存浪费问题，并提出通过原型链来实现对象间的属性和方法共享，从而避免内存浪费。解释了原型对象（prototype）的作用和对象原型（__proto__）的链式查找机制，展示了如何在实践中设置和利用原型链实现方法共享。最后，通过示例代码演示了原型链的工作原理。

摘要由CSDN通过智能技术生成

构造函数和原型链

好久没有记录了…

1.构造函数

1）创建对象的三种方式

以字面量的形式创建

var obj = {};
通过构造函数Object创建

var obj = new Object();
通过自定义构造函数创建

function Person(uname,age){

this.uname = uname;

this.age = age;

this.sing:function(){

console.log(‘我会唱歌’)

}

}

var ldh = new Person(‘刘德华’，45)；

ldh.sing();

自定义构造函数的命名规范：函数名的首字母要大写，可以将公共的属性和方法定义在构造函数的内部。

构造函数本身可以理解为‘类’，类是抽象出来的概念，可以把类当做一个模板。

2）构造函数内存浪费现象

通过构造函数new出来的实例化对象，每次创建出来一个对象，系统就会开辟一个新的内存空间存放对象，这就造成了系统内存浪费的现象。

function Person(uname,age,sex){
        this.uname = uname;
        this.age = age;
        this.sex = sex;
        this.speak = function(lang){
            console.log(this.uname+'说'+lang);
        };
 }
    // 通过构造函数new一个对象
    var p1 = new Person('jon',18,'男');
    p1.speak('中文');
    var p2 = new Person('lily',20,'女');
    p2.speak('英语');
    console.log(p1.speak == p2.speak); //false

2. 原型链

怎么实现所有通过构造函数实例化的对象共享一个方法？

解决方法：使用构造函数的原型对象，把公共的属性定义在构造函数内部，公共的方法定义在构造函数的原型对象上。

原型对象（prototype）：就是一个对象，是构造函数的一个属性

**原型对象的作用：**共享方法

对象原型（proto）:只要是对象，就会有__proto__的属性，该属性指向构造函数的原型对象。

__proto__存在的意义：就是给实例化出来的对象提供了一个链式查找机制

链式查找机制就是：当我们访问对象的一个属性时，比如speak属性，首先在该对象自身查找有没有speak方法，如果对象自身没有，就沿着__proto__的指向查找构造函数的原型对象prototype上有没有speak属性；如果还没有就在**构造函数的原型对象prototype的对象原型__proto__中查找；以此类推，直至找到Object.prototype的__proto__,**为null为止；这样一层一层的向上查找就形成了链式查找机制，也就是原型链。

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原型链</title>
</head>
<body>
    
</body>
<script>
    function Person(uname,age){
        this.uname = uname;
        this.age = age;
    }
    Person.prototype = {
        constructor:Person,
        eat:function(food){
            console.log(this.uname+'吃'+food);
        },
        speak:function(lang){
            console.log(this.uname+'讲'+lang);
        },
        skill:function(){
            console.log('他会画画');
        }
    }
        var p1 = new Person('lily',18);
        p1.speak('英语');
        console.dir(p1.__proto__); //指向Person构造函数的原型对象
        // 对象都有__proto__属性
        // 原型对象也是对象，也有__proto__属性
        console.dir(Person.prototype.__proto__)//指向Object构造函数的原型对象
        console.log(Object.prototype.__proto__);//null
</script>
</html>

Person.prototype.__proto__的指向：

Object.prototype.__proto__的指向:
在这里插入图片描述
希望可以给大家提供一丢丢的帮助，如有错误，请大家批评指正！

鲁kk

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
构造函数和原型链

构造函数和原型链好久没有记录了…1.构造函数1）创建对象的三种方式以字面量的形式创建var obj = {};通过构造函数Object创建var obj = new Object();通过自定义构造函数创建function Person(uname,age){ this.uname = uname; this.age = age; this.sing:function(){ console.log(‘我会唱歌’)}}var ldh = new P
复制链接

扫一扫