prototype全解全析

最新推荐文章于 2023-08-28 23:49:08 发布
最新推荐文章于 2023-08-28 23:49:08 发布
阅读量1k 收藏 3
点赞数 3
分类专栏： js 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52207728/article/details/117131303
版权

prototype和原型链查找：
任何函数都有 prototype属性， prototype是英语“原型”的意思。prototype属性值是个对象，它默认拥有constructor属性指回函数。
举个栗子：

        function sum(a,b){
            return a+b;
        }
        console.log(sum.prototype); // {constructor: ƒ}
        console.log(typeof sum.prototype); // object
        console.log(sum.prototype.constructor == sum); // true

普通函数来说的prototype是没有任何用处的，但构造函数的prototype属性非常有用。
注意：构造函数的prototype属性是它的实例的原型
见图：
在这里插入图片描述
这里面的 _proto_不是W3C的标准属性，而是谷歌浏览器为了学习者学习而创造出现的属性。虽然 _proto_不是标准属性，但原型这条线是在所有浏览器中都存在的，只不过在谷歌浏览器中可以访问到这条线的。
举个栗子：

        function People(name,age,sex) {
            this.name = name;
            this.age = age;
            this.sex = sex;
        }
// 实例化：
       var xiaoming = new People('xiaoming',18,'male');
// 测试：
        console.log(xiaoming.__proto__ == People.prototype); // true

原型链查找：
Javascript规定：实例可以打点访问它的原型的属性和方法，这被称为“原型链查找”
举个栗子：

    function People(name,age,sex) {
        this.name = name;
        this.age = age;
        this.sex = sex;
    }
    // 往原型上添加nationality属性：
    People.prototype.nationality = '中国';
    var xiaoming = new People('xiaoming',18,'male');
    console.log(xiaoming.nationality); // 中国
    console.log(xiaoming);

在这里显示中国是没有任何问题的因为：
在这里插入图片描述
在原型链上是可以查找到的。
可以看这副图：

在这里插入图片描述
要打印的是xiaoming.nationality，因为xiaoming身上没有nationality属性，但People.prototype里面有nationality这个属性，所以就会通过_proto_这个链去查找nationality，所以打印出来结果就是中国。

说到这个给一个题目：
在这里插入图片描述
问：实例化一个对象Tom，在没有给Tom添加nationality属性时问console.log(Tom.nationality)的值和给Tom添加Tom.nationality = '美国';后console.log(Tom.nationality)的值？
大家想想应该都能得出结果，在没有添加时，Tom没有nationality这个属性，因此就会往原型上找，所以打印出来的结果是中国，但如果一添加Tom.nationality，那么在打印Tom.nationality时就不需要往原型上找了（自身就有），所以打印出来的结果是美国。

    function People(name,age,sex) {
        this.name = name;
        this.age = age;
        this.sex = sex;
    }
    // 往原型链上设置nationality属性：
    People.prototype.nationality = '中国';
    // 实例化Tom：
    var Tom = new People('Tom',20,'男');
    Tom.nationality = '美国';

    console.log(Tom.nationality); // 美国

这种情况也叫原型链的遮蔽效应。
hasOwnProperty：
hasOwnProperty方法可以检查对象是否真正“自己拥有”某种属性或者方法。
举例：

    function People(name,age,sex) {
        this.name = name;
        this.age = age;
        this.sex = sex;
    }
    // 往原型链上设置nationality属性：
    People.prototype.nationality = '中国';
    // 实例化xiaoming：
    var xiaoming = new People('xiaoming',18,'male');

   console.log(xiaoming.hasOwnProperty('name')); // true
   console.log(xiaoming.hasOwnProperty('age')); // true
   console.log(xiaoming.hasOwnProperty('sex')); // true
// xiaoming不是自己用于nationality属性，所以结果是false
   console.log(xiaoming.hasOwnProperty('nationality')); // false

in：
in运算符只能检查某个属性或方法是否可以被对象访问，不能检查是否是自己的属性或方法。
举例：

    function People(name,age,sex) {
        this.name = name;
        this.age = age;
        this.sex = sex;
    }
    // 往原型链上设置nationality属性：
    People.prototype.nationality = '中国';
    // 实例化xiaoming：
    var xiaoming = new People('xiaoming',18,'male');

    console.log('name' in xiaoming); // true
    console.log('age' in xiaoming); // true
    console.log('sex' in xiaoming); //true
    console.log('nationality' in xiaoming); // true

在构造函数里字面量添加方法：
举例：

        function People(name,age,sex) {
            this.sayHello = function() {

            }
        }
        var xiaoming = new People();
        var xiaohong = new People();
        var xiaogang = new People();

        console.log(xiaoming.sayHello == xiaohong.sayHello); // false

在实例化的时候它们不是同一个引用，指向不同的堆内存。

缺点： 把方法直接添加到实例身上的缺点：每个实例和每个实例的方法函数都是内存中的不同函数，会造成内存的浪费。
解决方法： 将方法写到prototype上面。
图片演示：
在这里插入图片描述
在People.prototype上添加方法时，在实例化时都是顺着_proto_这个原型链往People.protype里面找，因为People.prototype是同一个引用，所以可以解决内存的浪费问题。

代码：

        function People(name,age,sex) {
            this.name = name;
            this.age = age;
            this.sex = sex;
        }
        // 把方法写到原型上，工整，减少内存占用
        People.prototype.sayHello = function() {
            console.log('我是' + this.name + '，我' + this.age + '岁了');
        }
        People.prototype.grown = function() {
            this.age++;
        }

        var xiaoming = new People('小明',20,'男');
        var xiaohong = new People('小红',10,'女');

		console.log(xiaoming.sayHelllo() == xiaohong.sayHello()); // true
        xiaoming.sayHello(); // 我是小明，我20岁了
        xiaohong.sayHello(); // 我是小红，我10岁了

        xiaoming.grown();
        xiaoming.grown();
        xiaoming.grown();
        
        xiaoming.sayHello(); //  我是小明，我23岁了
        xiaohong.sayHello(); // 我是小红，我10岁了

原型链的终点：

大家先看这张图：
在这里插入图片描述
在这张图片中Peopel.prototype相当于Object new出来的，所以People可以通过_proto_原型链查找到原型Object.prototype，可以通过console.log(xiaoming.__proto__.__proto__ == Object.prototype);进行验证，还有一点这里也可以解释了：上面我们讲过hasOwnProperty()和toString()方法，知道xioaming可以打点调用这两个方法，为什么可以调用？这里就得到了答案，因为hasOwnProperty()和toString()方法是原型链终点Object.prototype的方法，所以xiaoming可以通过原型链查找的方式去找到hasOwnProperty()和toString()方法，因此可以打点调用，还有一点就是Object.prototype是原型链的终点，这点可以通过代码console.log(Object.prototype.__proto__);为null进行解释。

具体见下面代码：

        function People(name,age) {
            this.name = name;
            this.age = age;
        }
        var xiaoming = new People('小明',30);
        console.log(xiaoming.__proto__.__proto__ == Object.prototype); // true
    
        console.log(Object.prototype.__proto__); // null

        console.log(xiaoming.toString()); // [object Object]

这里还有个数组的原型链：
在这里插入图片描述
任何数组都是Array实例化的表现(Array new 出来的)，在数组的原型链Array.prototype上有push() pop() slice()等方法，所以任何数组都可以打点调用这些方法，通过这点我们就能知道为什么数组可以调用那些方法了，还有一点就是数组的原型链终点也是Object.prototype，所以数组也可以调用hasOwnProperty()和toString()方法的。

下面见代码演示：

        var arr = [44,55,33,66];
// 等价于 var arr = new Array(44,55,33,66);
        console.log(arr.__proto__ == Array.prototype); // true
        console.log(arr.__proto__.__proto__ == Object.prototype); // true
        console.log(Array.prototype.hasOwnProperty('push')); // true
        console.log(Array.prototype.hasOwnProperty('pop')); // true

继承（面试题——手写继承）：

1、实现继承的关键在于：子类必须拥有父类的全部属性和方法，同时子类还应该能定义自己特有的属性和方法。
2、使用Javascript特有的原型链特性来实现继承，是普遍的做法。
3、在今后学习ES6时会学习新的实现继承的方法。

见图：
在这里插入图片描述
讲解：先定义一个父类People，在父类身上添加方法sayHello(),sleep()，接着定义一个子类Student，然后将子类Student的原型Student.prototype指向父类People new 的实例，然后在子类的原型上（Student.prototype）添加方法study() exam()等，然后再实例化子类var hanmeimei = new Student()，然后hanmeimei就可以通过打点的方法调用各种方法（父类 子类均可以）。其中非常关键的一步就是：将子类Student的原型Student.prototype指向父类People new 的实例Student.prototype = new People();

见代码：

	// 父类：
        function People(name,age,sex) {
            this.name = name;
            this.age = age;
            this.sex = sex;
        }
        People.prototype.sayHello = function() {
            console.log('你好我是'+this.name+',我今年'+this.age+'岁了');
        }
        People.prototype.sleep = function() {
            console.log(this.name + '开始睡觉了 zzzzz');
        }

        // 子类 学生
        function Student(name,age,sex,scholl,studentNumber) {
            this.name = name;
            this.age = age;
            this.sex = sex;
            this.scholl = scholl;
            this.studentNumber = studentNumber;
        }
        // 关键语句，实现继承： 要写在子类添加方法之前
        Student.prototype = new People();


        Student.prototype.study = function() {
            console.log(this.name + '正在学习！');
        }
        Student.prototype.exam = function() {
            console.log(this.name + '正在考试！加油！');
        }

        // 实例化：
        var hanmeimei = new Student('韩梅梅',20,'女','爱大学','31299999');

        hanmeimei.study(); // 韩梅梅正在学习！
        hanmeimei.sayHello(); // 你好我是韩梅梅,我今年20岁了
        hanmeimei.exam(); // 韩梅梅正在考试！加油

拓展继承——手写父类的方法：

代码：

        function People(name,age,sex) {
            this.name = name;
            this.age = age;
            this.sex = sex;
        }
        People.prototype.sayHello = function() {
            console.log('你好我是'+this.name+',我今年'+this.age+'岁了');
        }
        People.prototype.sleep = function() {
            console.log(this.name + '开始睡觉了 zzzzz');
        }

        // 子类 学生
        function Student(name,age,sex,scholl,studentNumber) {
            this.name = name;
            this.age = age;
            this.sex = sex;
            this.scholl = scholl;
            this.studentNumber = studentNumber;
        }
        // 关键语句，实现继承：
        Student.prototype = new People();


        Student.prototype.study = function() {
            console.log(this.name + '正在学习！');
        }
        Student.prototype.exam = function() {
            console.log(this.name + '正在考试！加油！');
        }
///
        // 重写、复写（overwrite）父类的sayHello方法：
        Student.prototype.sayHello = function() {
            console.log('敬礼！我是' + this.name);
        }
//


        // 实例化：
        var hanmeimei = new Student('韩梅梅',20,'女','爱大学','31299999');

        hanmeimei.study(); // 韩梅梅正在学习！
        hanmeimei.sayHello(); // 敬礼！我是韩梅梅
        hanmeimei.exam(); // 韩梅梅正在考试！加油！
凉风有信、
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
prototype 1.7.3版
04-16
Prototype JavaScript 框架是早期 Web 开发中广泛使用的库之一，主要为浏览器环境提供了许多实用的函数和类，以简化 JavaScript 编程。在 1.7.3 版本中，它继续提供对 DOM 操作、事件处理、Ajax 交互以及对象扩展等...
prototypejs 1.7.3
11-16
《PrototypeJS 1.7.3：前端开发的利器》 PrototypeJS，简称为Prototype，是一个广泛用于JavaScript编程的开源库，它为JavaScript语言引入了许多实用的类和方法，极大地提高了开发效率。版本1.7.3是这个库的一个稳定...
prototype 是什么东西，原型链的理解，什么时候用 prototype
splendid_can的博客
11-26 1万+
prototype     prototype是函数对象上面预设的对象属性     1. JS中所有的东西都是对象,每个对象都有prototype这个属性，这个属性是一个对象（object）     2. JS中所有的东西都由Object衍生而来, 即所有东西原型链的终点指向Object.prototype     3. JS中构造函数和实例(对象)之间有微妙的关系，构造函数通过定义pro
深入理解prototype(原型对象)
flyingpig2016的博客
11-05 3万+
对JavaScript中原型模式的理解一：什么是原型对象？有什么优点？    简单的来说，无论何时，我们创建的每一个函数都有一个prototype属性，这个属性是一个指针，指向一个对象，这个对象包含了通过调用该构造函数所创建的对象共享的属性和方法。其实我们平常的叫法就是指：prototype就是通过该构造函数创建的某个实例的原型对象，但是其实prototype是每个构造函数的属性而已，只能说万物皆
prototype详解及prototype、new之间的关系
Turnhead的专栏
06-29 3587
1.prototype解释 在JavaScript中，prototype对象是实现面向对象的一个重要机制。 每个函数就是一个对象（Function），函数对象都有一个子对象 prototype对象，类是以函数的形式来定义的。prototype表示该函数的原型，也表示一个类的成员的集合。 在通过new创建一个类的实例对象的时候，prototype对象的成员都成为实例化对象的成员
Js中prototype、[[prototype]]和__proto__的区别和用法
qq_38722097的博客
02-28 1万+
一.显式原型&隐式原型 显式原型：prototype 隐式原型：__proto__ 1.1 Important __proto__是每个对象都具有的属性 prototype是Function独有的属性 1.2 Tips 对象的隐式原型的值为其对应构造函数的显式原型的值 fn.__proto__ === Function.prototype 函数的prototype属性是定义...
轻松搞懂js原形和原型链，只需要打开Chrome
qq_39851888的博客
08-31 673
想要搞懂原型链，你只需打开Chrome，看再多理论，如果自己不动手，也是很难掌握的。下面就跟着笔者一步一步来console吧！
JavaScript知识点之prototype
玉案轩窗的博客
08-18 1881
前言prototype是所有函数都有的内置属性，prototype属性的值是对象，该对象称之为原型对象。原型是Js的核心概念之一，它引申出继承、原型链等其他概念，本文就详细的分析总结下prototype的相关知识点。在理解prototype之前，我觉得有必要讲讲面向对象，当然这里不会讲很多，就讲讲Js的面向对象与Java面向对象的区别。 联系：都是面向对象编程 区别：
prototype_PrototypeJS1.6_
10-02
标题"prototype_PrototypeJS1.6_"中提到的"Prototype"是一个JavaScript库，它为JavaScript编程提供了一套丰富的工具集，主要用于简化DOM操作、创建Ajax应用以及实现对象的继承机制。"1.6版本"表明这是该库的一个特定...
Prototype框架详解
09-03
Prototype框架详解 Prototype是一个强大的JavaScript库，由Sam Stephenson创建，它主要目的是为了简化Web应用程序的动态开发，尤其是Ajax交互。作为一个单文件分发的prototype.js，它在Web开发领域得到了广泛应用，...
Prototype 学习 Prototype对象
09-05
Prototype 学习 Prototype对象
[乐意黎转载]JavaScript中原型对象的彻底理解
打杂人
12-05 840
一、什么是原型 原型是Javascript中的继承的继承，JavaScript的继承就是基于原型的继承。 1.1 函数的原型对象 ​ 在JavaScript中，我们创建一个函数A(就是声明一个函数), 那么浏览器就会在内存中创建一个对象B，而且每个函数都默认会有一个属性 prototype 指向了这个对象( 即：prototype的属性的值是这个对象 )。这个对象B就是函
帮你彻底搞懂JS中的prototype、__proto__与constructor（图解）
07-20 203
1. 前言 作为一名前端工程师，必须搞懂JS中的prototype、__proto__与constructor属性，相信很多初学者对这些属性存在许多困惑，容易把它们混淆，本文旨在帮助大家理清它们之间的关系并彻底搞懂它们。   这里说明一点，__proto__属性的两边是各由两个下划线构成（这里为了方便大家看清，在两下划线之间加入了一个空格：_ _proto_ _，读作“dunder proto”，“double underscore proto”的缩写），实际上，该属性在ES标准定义中的名字应该是[[Pro
深入理解javascript中函数的prototype属性(原型)
CJF的博客
12-20 7053
函数的prototype属性 一、 只要我们创建一个函数，该函数就会自动获得一个prototype属性，这个属性指向函数的原型对象。 创建fn函数自动获得prototype属性，该属性是一个对象即该函数的原型对象，我们可以看到原型对象默认会有一个constructor属性，该属性是指向函数自身即fn。 二、 函数的prototype属性是一个对象 typeof fn.protot
prototype原型
weixin_52629158的博客
05-14 199
前端面试题什么是原型、原型链它们有什么特点它们能做什么怎么确定它们的关系。
原型链----看懂_proto_和prototype
wenmin1987的博客
09-15 557
文章目录 1. 前言 2. _ _ proto _ _ 属性 3. prototype属性 4. constructor属性 5. 总结 提示：不要排斥，静下心来，认真读完，你就搞懂了！(可以先看一下最后的总结部分再回过头来完整看完) 1. 前言   作为一名前端工程师，必须搞懂JS中的prototype、__proto__与constructor属性，相信很多初学者对这些属性存在许多困惑，容易把它们混淆，本文旨在帮助大家理清它们之间的关系并彻底搞懂它们。这里说明一点，__prot..
一文读懂原型链 prototype和__proto__详解
热门推荐
D-的博客
07-24 3万+
先在自身属性/方法中查找，找到则返回。如果没有找到。就会沿着__proto__这条链去查找，找到也会返回。如果查到了原型链的尽头还是没有查找到，则返回undefined。2.因为在实例化对象查找属性或者方法时总是沿着__proto__隐式原型链查找，所以原型链又称作隐式原型链。3.原型链的作用查找对象的属性或者方法。httpshttpshttps。..............................
设计模式—原型模式(Prototype)
最新发布
一起加油吧~
08-28 2041
用原型实例指定创建对象的种类，并且通过拷贝这些原型创建新的对象。原型模式其实就是从一个对象再创建另外一个可定制的对象，而且不需知道任何创建的细节简单说就是先创建一个原型类实例，然后通过克隆的方法来复制一个一样的新对象，这个对象和原来的对象相同或相似核心：通过自带的Clone（）方法和ICloneable接口创建跟该对象相同的新对象，不需要知道具体的创建细节。就是具有相同的属性和功能的对象的抽象的集合。类名称首字母大写。多个单词则各个首字母大写；对外公开的方法需要用‘public’修饰符。
3分钟阅读深刻理解原型对象prototype，保姆级解析
qq_45660078的博客
03-28 577
三分钟快速理解原型对象prototype的本质。
Prototype 1.5.1 源代码深度解析
"Prototype1.5.1源代码解读分析" 在JavaScript的世界中，Prototype是一个非常重要的库，它致力于扩展JavaScript语言的功能，使得开发者能够采用更面向对象的编程风格。Prototype库由Sam Stephenson创建，主要目标是...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值