js中的原型链

SYK---Programm

已于 2023-10-16 10:08:53 修改

阅读量766

点赞数 1

分类专栏： JavaScript 文章标签： javascript

于 2023-03-01 20:52:51 首次发布

本文链接：https://blog.csdn.net/qq_62860882/article/details/129289561

版权

JavaScript 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

js中原型和原型链😚

1、为什么需要原型链？🤣😚

凡事都是有一定的需求和原因发展起来的，在ECMA中为什么要提出原型链这个概念呢？

我们知道，创建对象有两种方式。一种是通过字面量来创建，另一种是通过new 来创建。

let p1 = {
    age:18,
    name:'张'
}
let p2 = {
    age:19,
    name:'李'
}
let p3 = {
    age:20,
    name:'王'
}

后来，发现这种创建对象的方式太过于复杂了，人们就开始研究，然后提出了工厂模式这个概念。顾名思义：工厂模式就是批量生产，批量产生。

比如创建几个person😚

/*
 * @Author: syk 185901261@qq.com
 * @Date: 2023-03-01 00:30:52
 * @LastEditors: syk 185901261@qq.com
 * @LastEditTime: 2023-03-01 00:31:25
 * @FilePath: \js面试题\2.proto\1.js
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
 */
let createPerson = function (age, name) {
    let p = {};
    p.age = age;
    p.name = name;
    p.eating = () => {
        console.log(this.name+"在吃东西");
    }
}
let w =  createPerson(19, "wang");
let l =  createPerson(19, "li");
let c =  createPerson(19, "chen");

但是使用这个模式有个缺点：使用typeof检测类型的时候，始终都是object。我们不知道具体的object是谁的object。

后来又使用了构造函数进行创建。构造函数也称构造器(constructor)，在常见的面向对象语言当中(java)，构造函数一般都存放在类当中，是类当中的一个方法，每当我们创建一个对象的时候，都会自动去调用这个类的构造函数。但是，在JavaScript中，构造函数展现了自己的特色。JavaScript对构造函数的定义是：一个普通的函数被new了，那么这个函数便是构造函数了。

如果一个函数被使用new操作符调用了，那么它会执行如下操作：

在内存中创建一个新的对象(空对象)
这个对象==内部的[[prototype]]属性==会被赋值为该构造函数的prototype属性
构造函数内部的this，会指向创建出来的新对象
执行函数的内部代码(函数体代码)
如果构造函数==没有返回非空对象，反之则返回创建出来的新对象==

/*
 * @Author: syk 185901261@qq.com
 * @Date: 2023-03-01 00:30:52
 * @LastEditors: syk 185901261@qq.com
 * @LastEditTime: 2023-03-01 00:41:19
 * @FilePath: \js面试题\2.proto\1.js
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
 */
let createPerson = function (age, name) {
    this.age = age;
    this.name = name;
    this.eating = () => {
        console.log(this.name+"在吃东西");
    }
}
let w = new createPerson(19, "wang");
let l = new createPerson(19, "li");
let c = new createPerson(19, "chen");

使用构造函数的缺点：每次创建都会保留一些方法，这些方法在内存区中不停创建，导致内存利用率不高。因此，原型链这个观点就提出来了。

2、原型前置知识😚😚

1、所有的==引用类型（数组、函数、对象）可以自由扩展属性==（除null以外）。

2、所有的引用类型都有一个’_ _ proto_ _'属性(也叫隐式原型，它是一个普通的对象)。

3、所有的函数都有一个’prototype’属性(这也叫显式原型，它也是一个普通的对象)。

4、所有引用类型，它的’_ _ proto_ _'属性指向它的构造函数的’prototype’属性。

5、当试图得到一个对象的属性时，如果这个对象本身不存在这个属性，那么就会去它的’_ _ proto_ _'属性(也就是它的构造函数的’prototype’属性)中去寻找。

对此，也就是，如果我们将eating这个函数放到原型链上去，内存是不是就被更加充分地利用了呢。

/*
 * @Author: syk 185901261@qq.com
 * @Date: 2023-03-01 00:30:52
 * @LastEditors: syk 185901261@qq.com
 * @LastEditTime: 2023-03-01 00:47:50
 * @FilePath: \js面试题\2.proto\1.js
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
 */
 function createPerson(age, name) {
    this.age = age;
    this.name = name;
}
createPerson.prototype = {
        eating : function() {
            console.log(this.name+"在吃东西");
     }
    }
let w = new createPerson(19, "wang");
let l = new createPerson(19, "li");
let c = new createPerson(19, "chen");
w.eating()
l.eating()

3.原型链

/*
 * @Author: syk 185901261@qq.com
 * @Date: 2023-03-01 20:33:08
 * @LastEditors: syk 185901261@qq.com
 * @LastEditTime: 2023-03-01 20:38:32
 * @FilePath: \js面试题\3.prototype\1.js
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
 */
function Person(name, age) {
    this.name = name;
    this.age = age;
}
Object.prototype.toString = function () {
    console.log("my name is"+this.name+"age is"+this.age);
}
let p = new Person('jack', 19);
console.log(p.toString === Person.prototype.__proto__.toString);// true
console.log(p.__proto__ === Person.prototype);// true
console.log(Person.prototype.__proto__===Object.prototype);// true