封装--javascript的原型（prototype）

最新推荐文章于 2022-06-06 17:20:41 发布
最新推荐文章于 2022-06-06 17:20:41 发布
阅读量1.1k 收藏
点赞数
分类专栏： JavaScript 文章标签： 对象 函数 prototype 封装
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yana_li/article/details/52781399
版权
这里介绍一种基于组合的对象定义
为了解决原型所带来的问题，需要通过组合构造函数和原型来实现对象的创建：将属性在构造函数中定义，将方法在原型中定义。这样有效结合了基于原型链和构造函数来定义对象的有点，是目前最为常用的一种方式。
代码演示如下：
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
        //属性在构造方法中定义
            function Person(name,age,friends){
                this.name=name;
                this.age=age;
                this.friends=friends;
            }

            //将方法定义在原型中
            Person.prototype={
                constructor:Person,
                say:function(){
                    console.log("my name is :"+this.name+",age is :"+this.age);
                }
            };


            var p1=new Person("liyanan",13,["lh","jc"]);

            p1.friends.push("ld");

            console.log(p1.friends);

            p1.say();

            var p2=new Person("lyn",13,["lys","lc"]);

            console.log(p2.friends);

            p2.say();
        </script>
    </head>
    <body>
    </body>
</html>
运行结果：

这里写图片描述

此时的内存模块图如下所示：

这里写图片描述

这里介绍另外一种基于动态原型的对象定义（选学）
代码演示如下：
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            //属性在构造方法定义
            function Person(name,age,friends){
                this.name=name;
                this.age=age;
                this.friends=friends;
                //判断不存在的时候写,如果存在就不写，内存减少消耗
                if(!Person.prototype.say){
                    Person.prototype.say=function(){
                        console.log("my name is :"+this.name+",age is :"+this.age);
                    }
                }
            }


            var p1=new Person("liyanan",13,["lh","jc"]);

            p1.friends.push("ld");

            console.log(p1.friends);

            p1.say();

            var p2=new Person("lyn",13,["lys","lc"]);

            console.log(p2.friends);

            p2.say();
        </script>
    </head>
    <body>
    </body>
</html>
运行结果：

这里写图片描述

花帜
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
本人博客中涉及的prototype.js文件及本人从中提取的ajax库和封装函数
09-02
本人博客中所包含的prototype文件 ajax.js是本人从prototype-1.3.1.js提取的ajax库 为方便调用，本人另写了两个函式：mmAjaxUpdater和mmAjaxRequest，在实践中，这两个函数只兼容prototype1.3.1版本。因此对以上函数进行重写，现在已兼容所有版本的prototype.js，方便在项目开发中进行ajax调用。
ES6.class类及构造函数,原型对象prototype,实例对象__proto__属性,面向对象三大特性,(封装,继承,多态)
你还有我
02-28 1817
目录构造函数1.什么是构造函数2.为什么要使用构造函数如何封装一个构造函数3.构造函数的执行过程4.构造函数的返回值5.与普通函数的区别5.1调用方式的不同5.2 返回值不同5.3 作用的不同原型对象对象的封装对象属性 __proto__ 构造函数 1.什么是构造函数 定义：在js中，使用new关键字来调用的函数，被称为构造函数。 构造函数的作用：创建对象。 2.为什么要使用构造函数 假如需要创建多个类似的对象，我们会书写很多重复的无意义代码。此时我们使用构造函数，方便快捷的创建一个对象。 如何封装一个构造
js——封装
qq_41580536的博客
08-30 3302
js——封装 封装基本概念 // 1. 构造函数 function Cat (name) { this.name } // 2. 构造函数原型对象 Cat.prototype // 3. 使用Cat构造函数创建的实例'乖乖' var guaiguai = new Cat('guaiguai') // 4. 构造函数的静态方法,名为fn Cat.fn = function () {} // 5. 原型对象上的方法,名为fn Cat.prototype.fn = function () {}
js面向对象三大特性之系列一 封装
yiyueqinghui的博客
07-03 1695
面向对象三大特性：封装，继承，多态 1、什么是封装 定义：把客观事物封装成抽象的类，隐藏属性和方法的实现细节，仅对外公开接口。 其实封装就是将属性和方法组成一个类的过程就称之为封装； 封装实现的三种方式： 分别是构造函数、原型、在类的外部通过.的语法添加 2、封装的三种方式 2.1、构造函数方法 构造函数添加属性和方法实际上也就是通过this添加的属性和方法 function Cat(name,age){ // 相当于 this = new Object() this.name = .
封装——JavaScript的原型（prototype）
yy_YuanyuanGao的博客
11-09 681
prototype，原型的初览 function Person(){ Person.prototype.name="小花"; Person.prototype.age=18; Person.prototype.say=function(){ alert("姓名："+this.name+",年龄："+this.age); } } var p1=new Person(); p1.sa
JavaScript使用prototype原型实现的封装继承多态示例
10-18
JavaScript中的prototype是实现原型继承的关键，它允许我们向对象添加方法和属性。下面将详细介绍使用prototype实现封装、继承和多态的概念以及相关的代码示例。 首先，封装是面向对象编程中的一个核心概念，它涉及...
JavaScript中的prototype原型学习指南
10-22
JavaScript中的prototype原型学习指南主要涵盖了JavaScript语言中一个核心概念——原型（prototype）。原型是理解JavaScript继承机制的关键，它涉及到原型链、原型对象、函数的prototype属性以及__proto__属性等。 ...
跟我学习javascript的prototype原型和原型链
10-23
在JavaScript编程语言中，prototype原型和原型链是理解其面向对象特性的核心概念。JavaScript是一种基于原型的语言，它与传统的面向对象语言（如Java或C#）不同，后者是基于类的继承模型。而JavaScript使用原型链来...
Javascript学习笔记9 prototype封装继承
10-29
本文将深入探讨如何利用JavaScript中的prototype（原型）来封装继承机制，以及如何实现面向对象的继承特性。 ### prototype与继承的关系 在JavaScript中，每个对象都有一个原型（prototype），原型本身也是一个...
game-prototype_2:原型到共享
06-12
在JavaScript中，组件可以视为可重用的代码块，它们封装特定的功能，可以被组合起来构建更复杂的系统。类是面向对象编程的基础，用于创建具有特定属性和方法的对象。在游戏开发中，类常用来表示游戏对象，如角色、...
js封装对象——prototype的使用
weixin_34077371的博客
02-28 241
为什么80%的码农都做不了架构师？>>> ...
JS 原型（prototype）、原型的应用以及模拟封装
boonyaxnn的博客
04-16 635
一、原型（prototype） 1、定义：js提供给【函数】的一个对象类型的属性。不需要手动创建，默认存在 2、对象查找属性的规则： ①首先在对象本身中查找； ②没有时去原型中查找； ③任何一层中找到，就返回值； ④当原型中也没有时，返回undefined。 3、作用： ①开辟一块公共的空间，供通过该构造函数创建的对象使用 ②可以对系统类执...
js中利用prototype给类添加方法
热门推荐
04-29 1万+
1.如何定义一个简单的类？ 以下是一个没有任何属性和方法的类的定义：function MyClass(){};你可能会想，这不就是个简单的函数声明？没错，这个函数就是一个类的定义的实现。如何使用这个类呢？看下面的代码：var cls1 = new MyClass();这样，利用new就可以生成MyClass的一个实例了。所以在js中可以说函数就是类，类就是函数。2.给类增加属性和方法functio
javaScript封装的各种写法
weixin_30672295的博客
07-11 345
在javascript的世界里，写法是个神奇的现象，真是百家齐开放啊！每次看到老外写的js组件，思想和写法都怪异，就没看到一个js结构基本相同的代码出来。今天，我就来谈谈js写法，我在开发过程中，也写了几种。对于性能方面，如果代码结构或逻辑写的不好，会造成计算机CPU的运算加大，运行性能降低，js的写法对性能的影响也是至关重要的。 通常写js组件开发的，都会用到匿名函数的...
js之面向对象——封装
Albafika
06-06 5927
回顾多年前第一次接触js，其实是有点反感的。相比于C#、java等强类型语言，js语法无法在IDE中通过键入“.”的方式，获取对象的智能提示，对于一个初学者这是一个非常不好的体验。即使多年以后，IDE有了不小的进步，但也只能将js内置对象的方法和属性以只能提示的方式体现，而自己定义的方法、属性，或者引入的第三方js对象的方法、属性依然是无法被IDE感知。 究其原因，无非就是因为js的对象没有cla......
JavaScript个人笔记：面向对象设计一（封装及prototype）
Star
09-21 387
1.遍历【迭代】对象 object对象 new关键字代表的是新开辟一块内存空间 没有被引用的内存空间，会在适当的时候被销毁 var person = new Object(); var person = {}; 两句代码含义等同 访问对象的属性除了用 对象引用.属性key以外，还可以
JS常用方法封装
油墨香^-^的博客
05-20 1787
数组扁平化 数组扁平化是指将一个多维数组变为一个一维数组 const arr = [1, [2, [3, [4, 5]]], 6];// => [1, 2, 3, 4, 5, 6] 方法一：使用flat()
深入理解JavaScript原型与原型链
"JavaScript中的prototype原型是编程语言中一种实现对象继承的重要机制。本文将深入讲解JavaScript中的prototype原型，包括其概念、作用以及常见的对象创建模式。" 在JavaScript中，`prototype`是一个特殊的属性，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值