原型

最新推荐文章于 2022-11-16 20:00:26 发布
最新推荐文章于 2022-11-16 20:00:26 发布
阅读量233 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43776742/article/details/104471625
版权

原型

任何函数都有一个prototype属性 它是一个对象 原型对象
只不过原型对普通函数没有多大意义

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        /* 任何函数都有原型 普通函数原型没什么用
        function fun() {
            alert("hehe");  
        }
        console.log(typeof fun.prototype);
        */
        function People(name) {
            this.name = name;
        }
        console.log(People.prototype);//{constructor: ƒ}
        People.prototype = {
            constructor: People,
            name: "kaola",
            sex: "nan",
            say: function() {
                alert("yaya");
            }
        };
        console.log(People.prototype);
        // new出一个对象 不仅仅执行构造函数的语句 同时也会把这个对象的__proto__属性指向了构造函数的prototype
        var xh = new People("xiaohong");
        var xm = new People("xiaoming");
        console.log(xh.name); // "xiaohong"
        console.log(xh.age);
        console.log(xh.__proto__ === xm.__proto__);
        xh.say();
        xm.say();
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script>
        function Student(name, sex, age) {
            this.name = name;
            this.sex = sex;
            this.age = age;
        }

        function fn() {
            alert("123");
        }

        Student.prototype.study = function() {
            alert("好好学习 天天向上");
        }

        var s1 = new Student("zs", "男", 17); //例如 name,age,sex这些都是每new一个对象需要赋值的。是这个对象私有的。
        var s2 = new Student("zj", "男", 36); //原型中的相当于这个对象公有的方法。每个对象都能调用。    
        s1.study(); // 通过Student构造函数创建的对象 可以使用Student.prototype中的成员
        s2.study();
        console.dir(s1.__proto__ === Student.prototype); // true
        console.log(s1.study === s2.study); // true
        console.log(s1.study === Student.prototype.study); // true
		console.dir(Student.prototype.constructor);
        console.dir(Student.prototype.constructor === s1.constructor); // true
		/* 
		    构造函数 实例 原型
		                    属性prototype
		    构造函数Student -------------->Student.prototype               
		        ||                          {...,study:function{},constructor:Student}
		        ||  new                         |^
		        ||                              || 
		        ||                              || __proto__
		    Student实例如s1,s2------------------
		*/

		console.log("===============================================================");
        var arr = []; // new Array()
		console.log(arr.__proto__ === Array.prototype);
        console.log(arr.constructor === Array);
    </script>
</body>

</html>
回顶层目录

原型链

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>原型链</title>
</head>

<body>
    <script>
        function Student(name, sex) {
            this.name = name;
            this.sex = sex;
            this.study = function() {
                alert("haha");			//如果对象内封装函数，会调用自己的函数，而不会去调用prototype的函数。
            }
        }
       
        Student.prototype.study = function () {
            alert("good good study day day up");
        }

        Student.prototype.class = "01";

        var s1 = new Student("zs", "nan"); // {name:"zs",sex:"nan",__proto__:{}}
        var s2 = new Student("lisi", "nv"); // {name: "lisi",sex:"nv"}
        s1.study();
    </script>
</body>

</html>
回顶层目录

属性对象的查找方法

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        function Student(name,sex){
			this.name = name;
			this.sex = sex;
		}
		
		Student.prototype.study = function(){
			alert("阳光明媚！！！");
		}
		Student.prototype.class = "01";

		var s1 = new Student("Brain","man");
		var s2 = new Student("Danny","woman");
		console.log("s1.__proto__.__proto__ === Object.prototype:");
		console.log(s1.__proto__.__proto__ === Object.prototype);
		console.log("\ns1.__proto__.__proto__:");
		console.log(s1.__proto__.__proto__);
		console.log("\ns1.__proto__:");
		console.log(s1.__proto__);
		console.dir(s1);
		// s1.study();
    </script>
</body>

</html>
回顶层目录

原型的注意事项

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        function Student(name,sex) {
            this.name = name;
            this.sex = sex;
        }
  		//添加原型属性的方法一：
        /*
        Student.prototype.study = function () {
            alert("good good study day day up");
        }

        Student.prototype.eat = function() {

        }
        */
        //方法二：
        Student.prototype = {
            constuctor: Student,//重点注意： 重新设置prototype时候 需要手动添加constructor
            study: function() {

            },
            eat: function() {
 
            }
        }

        var s1 = new Student("zs","nan");
        console.log(s1.constuctor);
    </script>
</body>
</html>
回顶层目录
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        var arr = [1, 2, 3, 4, 5];// new Array()
        var arr2 = [10, 20, 30];
        /* 方法定义在原型上*/
        Array.prototype.getSum = function() {
            var sum = 0;
            for(var i=0; i<this.length; i++) {
                sum += this[i];
            }
            return sum;
        }
        // 修改Array或String的prototype是无效的 原因是对原来的原型对象保护
        /* Array.prototype = {
            getSum: function () {
                var sum = 0;
                for (var i = 0; i < this.length; i++) {
                    sum += this[i];
                }
                return sum;
            }
        } */
       
        var res = arr2.getSum();
        alert(res);
    </script>
</body>

</html>
回顶层目录

返回目录

端脑
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS中的原型和原型链（图解）
qq_36996271的博客
09-09 5万+
JS中的原型和原型链 讲原型的时候，我们应该先要记住以下几个要点，这几个要点是理解原型的关键： 1、所有的引用类型（数组、函数、对象）可以自由扩展属性（除null以外）。 2、所有的引用类型都有一个’_ _ proto_ _’属性(也叫隐式原型，它是一个普通的对象)。 3、所有的函数都有一个’prototype’属性(这也叫显式原型，它也是一个普通的对象)。 ...
axure原型元件库合集
最新发布
12-22
axure原型元件库合集axure原型元件库合集axure原型元件库合集axure原型元件库合集axure原型元件库合集axure原型元件库合集axure原型元件库合集axure原型元件库合集axure原型元件库合集axure原型元件库合集axure原型...
原型和原型链
热门推荐
weixin_56505845的博客
08-13 5万+
一、前言 在js中，原型和原型链是一个很重要的知识点，只有理解了它，我们才能更深刻的理解js，在这里，我们将分成几个部分来逐步讲解。 二、构造函数 构造函数和普通函数本质上没什么区别，只不过使用了new关键字创建对象的函数，被叫做了构造函数。构造函数的首字母一般是大写，用以区分普通函数，当然不大写也不会有什么错误。 function Person(name, age) { this.name = name; this.age = age; this.species = '人类';
原型链继承
weixin_64037609的博客
09-05 869
原型链继承
原型图设计规范
小小张自由—>张有博
05-15 4255
原型图设计规范
整整1600套Axure原型图设计源文件UI UX交互设计案例
weixin_46664875的博客
06-17 4万+
网络上的Axure教程看了很多，大多数都是讲软件如何操作，讲交互逻辑和用户体验的却寥寥无几，而实际项目中却非常重交互逻辑和用户体验。把这1536套原型文件一一拆解，慢慢分析作者的设计思路，会发现，互联网产品交互设计真的很有意思，很容易掌握。 文件格式：Axure RP（为防止打不开的情况，建议使用9.0/10.0版本以上的软件打开） 文件数量：1536套 文件大小：5.95GB 资源包内包含相当丰富的项目原型，各行各业的小程序原型、APP原型、网页前端原型、中后台原型等等都有收录，涵盖教育、电商、直播及短视
原型和原型链的理解
Senora的博客
06-23 4152
原型与原型链的理解
原型和原型链的理解（有图清晰明了）
qq_64180670的博客
11-16 2万+
万物皆对象，原型及原型链之间的关系由图清晰可见
原型设计八大原则
weixin_44180173的博客
03-21 4389
原型设计八大原则 原则一:了解受众和意图这是原型设计流程的第一条,也是至关重要的原则。了解受众并理解圆形的意图,能驱动原型设计流程的各个方面, 原则二:稍加规划——再做原型稍加规划,再做原型,以渐增、迭代的方式展开工作,这样能适应不断变化的环境。 原则三:设定期望设定期望是基于名为激发心理学方法 原则四:可以画草图在这些决定往往归根于第一个原则:了解受众和意图 原则五:是原型,不是蒙娜丽莎原形本质上是最终产品的不完善和粗略的版本,原型并不完美,事实上粗略的原型往往能获得更好的反馈。 原则六:如果做不出来原形
什么叫原型链
qq_59020839的博客
10-16 951
什么叫原型链
原型尺寸
星空
07-26 3410
手机端原型尺寸一般是360x640（宽260，高640）px 平板端原型尺寸一般是768x1024（宽768，高1024）px PC端原型尺寸一般宽度是1200px http://www.iaxure.com/menupage/prototypesize.html https://blog.csdn.net/lvjin110/article/details/95...
千图网原型，素材下载原型-完整版RP源文件.rp.zip
05-16
标题中的“千图网原型，素材下载原型-完整版RP源文件.rp.zip”表明这是一个包含千图网设计的原型和素材下载界面的压缩包，其中的“RP源文件”通常指的是“Axure RP”软件的源文件。Axure RP是一款广泛使用的交互原型...
交互原型设计：积分兑换低保真原型.pptx
07-14
交互原型设计：积分兑换低保真原型 交互原型设计是指在设计过程中，通过创建一种原型，来验证和测试设计想法的可行性和实用性。积分兑换低保真原型是指在设计过程中，使用低保真原型来验证和测试积分兑换系统的可行...
交互原型设计：首页低保真原型设计.pptx
07-14
交互原型设计是软件开发过程中的重要环节，它用于在项目早期阶段清晰地表达产品的功能布局和用户界面。在这个过程中，低保真原型是一个初步的、简化的版本，它并不追求细节和视觉效果，而是关注于核心功能和用户体验...
Axure 原型案例
07-17
Axure是一款广泛应用于IT行业的原型设计工具，特别适合产品经理、设计师和开发人员在项目初期构建交互式的线框图和原型。这些原型可以帮助团队快速理解产品功能，进行有效的沟通，并为后续的开发工作提供清晰的指引...
overflow属性的使用
qq_43776742的博客
08-01 1025
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div { width: 120px; height...
小球圆周运动
qq_43776742的博客
12-15 985
小球圆周运动 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-eq...
CSS浮动目录
qq_43776742的博客
07-31 682
浮动介绍
小白快速入门篇---HTML+CSS+JS
qq_43776742的博客
11-04 615
1. HTML封神之路 — 目录 2. CSS封神之路 —— 目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值