JavaScript高级学习（二）

最新推荐文章于 2022-08-19 09:50:34 发布
最新推荐文章于 2022-08-19 09:50:34 发布
阅读量329 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_42853241/article/details/89609675
版权
本文深入解析JavaScript中的原型概念，包括如何通过原型添加方法以实现数据共享和节省内存，探讨实例对象、构造函数与原型对象之间的关系，并提供实例演示。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

       上一篇JavaScript高级学习（一）简单的复习了JS的基础知识，在复习创建对象时，由构造函数创建对象带来的问题引出原型这一词，此篇以原型开始学习。

原型

通过原型来添加方法,解决数据共享,节省内存空间

function Person(name,age) { 
	this.name=name; 
	this.age=age; 
	} 
	//通过原型来添加方法,解决数据共享,节省内存空间 
	Person.prototype.eat=function () { 
	console.log("吃凉菜"); 
	}; 
	
	var p1=new Person("小明",20); 
	var p2=new Person("小红",30); 
	console.log(p1.eat==p2.eat);//true

什么是原型？

  • 实例对象中有__proto__这个属性,叫原型,也是一个对象,这个属性是给浏览器使用,不是标准的属性----->__proto__----->可以叫原型对象
  • 构造函数中有prototype这个属性,叫原型,也是一个对象,这个属性是给程序员使用,是标准的属性------>prototype—>可以叫原型对象
  • 实例对象的__proto__和构造函数中的prototype相等—>true
  • 又因为实例对象是通过构造函数来创建的,构造函数中有原型对象prototype， 实例对象的__proto__指向了构造函数的原型对象prototype

练习—利用原型实现点击按钮改变div颜色

 <style type="text/css">
        div{
            width: 300px;
            height: 200px;
            background-color: red;
        }
    </style>
<body>
<input type="button" value="显示效果" id="btn">
<div id="dv"></div>
</body>

<script>
    function ChangeStyle(btnId,dvId,json) {
        this.btnObj=document.getElementById(btnId);
        this.dvObj=document.getElementById(dvId);
        this.json=json;
    }
    ChangeStyle.prototype.init=function () {
        var that=this;
        this.btnObj.onclick=function () {
            for (var key in that.json) {
                that.dvObj.style[key]=that.json[key];
            }
        };
    };
    var json={"height":"400px","width":"300px", "backgroundColor": "blue"};
    var cs=new ChangeStyle("btn","dv",json);
    cs.init();
</script>

点击前效果：
在这里插入图片描述
点击后效果：
在这里插入图片描述

构造函数、实例对象和原型对象之间的关系
  • 构造函数可以实例化对象
  • 构造函数中有一个属性叫prototype,是构造函数的原型对象
  • 构造函数的原型对象(prototype)中有一个constructor构造器,这个构造器指向的就是自己所在的原型对象所在的构造函数
  • 实例对象的原型对象(proto)指向的是该构造函数的原型对象
  • 构造函数的原型对象(prototype)中的方法是可以被实例对象直接访问的

在这里插入图片描述
什么样的数据需要写在原型中？

原型的作用之一是共享数据、节省内存
所以，需要共享的数据（属性、方法）写在原型中，不需要共享的数据写在构造函数中。

简单的原型语法
 function Student(name, age, sex) {
      this.name = name;
      this.age = age;
      this.sex = sex;
    }
    //简单的原型写法
    Student.prototype = {
      //手动修改构造器的指向
      constructor:Student,
      height: "188",
      weight: "55kg",
      study: function () {
        console.log("学习好开心啊");
      },
      eat: function () {
        console.log("我要吃好吃的");
      }
    };

    var stu=new Student("段飞",20,"男");
    stu.eat();
    stu.study();
    console.dir(Student);
    console.dir(stu);
原型对象中添加方法

原型中的方法是可以相互访问的

 function Animal(name,age) {
      this.name=name;
      this.age=age;
    }
    //原型中添加方法
    Animal.prototype.eat=function () {
      console.log("动物吃东西");
      this.play();
    };
    Animal.prototype.play=function () {
      console.log("玩球");
      this.sleep();
    };
    Animal.prototype.sleep=function () {
      console.log("睡觉了");
    };

    var dog=new Animal("小苏",20);
    dog.eat();

实例对象使用的属性和方法层层搜索

实例对象使用的属性或者方法,先在实例中查找,找到了则直接使用,找不到则,去实例对象的__proto__指向的原型对象prototype中找,找到了则使用,找不到则报错。

为内置对象添加原型方法

内置对象：全局对象、Number、Boolean、String、Array、Object、Function、Date、Math（其实除了Math及全局对象，其余的为构造函数）
ECMA-262 对内置对象的定义是：“由 ECMAScript 实现提供的、不依赖宿主环境的对象，这些对象在 ECMAScript 程序执行之前就已经存在了。”

 //为Array内置对象的原型对象中添加方法
    Array.prototype.mySort=function () {
      for(var i=0;i<this.length-1;i++){
          for(var j=0;j<this.length-1-i;j++){
              if(this[j]<this[j+1]){
                  var temp=this[j];
                this[j]=this[j+1];
                this[j+1]=temp;
              }//end if
          }// end for
      }//end for
    };

    var arr=[100,3,56,78,23,10];
    arr.mySort();
    console.log(arr);//100,78,56,23,10,3
局部变量变成全局变量

把局部变量给window就可以了

//函数自调用
(function () { 
	 })(); 
	
//把局部变量给window就可以了
(function (win) { 
	 var num=10;//局部变量 
	 //js是一门动态类型的语言,对象没有属性,点了就有了 
	 win.num=num; 
	 })(window); 
	 console.log(num); //10
产生随机数案例
 //通过自调用函数产生一个随机数对象,在自调用函数外面,调用该随机数对象方法产生随机数
    (function (window) {
        //产生随机数的构造函数
        function Random() {

        }
        //在原型对象中添加方法
        Random.prototype.getRandom=function (max,min) {
            return Math.floor(Math.random()*(max-min)+min);//floor向下取整
        };
       //把Random对象暴露给顶级对象window--->外部可以直接使用这个对象
        window.Random=Random;
    })(window);
    var random=new Random();
    console.log(random.getRandom(5,0));//floor得0，1，2，3，4
随机小方块案例

效果图：
在这里插入图片描述
代码：

 <style type="text/css">
        body{
            padding: 0;
            margin: 0;
        }
        .map{
            height: 600px;
            width: 800px;
            background-color:  #99CCFF;
            position: relative;
            left: 50%;
            margin-left: -400px;
        }
    </style>
<body>
<div class="map"></div>
</body>
<script>
    //产生随机数
    (function (window) {
        function Random() {

        }
        Random.prototype.getRandom=function (min,max) {
            return Math.floor(Math.random()*(max-min)+min);//floor向下取整
        };
        window.Random=new Random();
    })(window);
    //食物
    (function (window) {
        var map=document.querySelector(".map");
        //querySelector返回文档中匹配指定 CSS 选择器的一个元素
        
        //食物的构造函数
        function Food(width,height,color) {
            this.width=width||20;
            this.height=height||20;
            this.color=color;
            this.x=0;
            this.y=0;
            this.element=document.createElement("div");
        }
        //初始化小方块的样式
        Food.prototype.init=function (map) {
            var div=this.element;
            div.style.position="absolute";
            div.style.width=this.width+"px";
            div.style.height=this.height+"px";
            div.style.backgroundColor=this.color;
            map.appendChild(div);
            this.render(map);
        };
        //产生随机坐标
        Food.prototype.render=function (map) {
            var x= Random.getRandom(0,map.offsetWidth/this.width)*this.width;
            var y= Random.getRandom(0,map.offsetHeight/this.height)*this.height;
            this.x=x;
            this.y=y;
            var div=this.element;
            div.style.left=this.x+"px";
            div.style.top=this.y+"px";
            console.log(map.offsetWidth);
        };
        //实例化
        var food=new Food(20,20,"pink");
        food.init(map);

    })(window);
</script>

下一篇为：贪吃蛇案例，——面向对象的思想，原型添加方法的练习等等。

JS高级学习第三天---------原型链和继承的学习

LullabyLY
关注
javascript高级学习笔记整理
12-04
JavaScript是一种广泛应用于Web开发的动态编程语言，尤其在前端领域占据着核心...总的来说，JavaScript的高级学习涉及面向对象、数据类型、对象和数组等多个方面，理解这些知识点对于深入掌握JavaScript编程至关重要。
尚硅谷JavaScript高级学习笔记
最新发布
03-07
尚硅谷JavaScript高级学习笔记
JavaScript高级知识汇总（高级篇）
ZS74520的博客
09-10 1万+
JavaScript知识总结（高级篇） 1.深入基础 1.1数据类型 1.分类： -基本类型 -String:任意字符串 -Number:任意的数字 -boolean: true/false -undefined:未定义 -null:空 -引用（对象）类型 -Object:任意对象 -Function：一种特别的对象（可以执行） -Array：一种特别的对象（数值下标，内部数据是有序的） 2.判断： -typeof： 可以判断：undefined、数值、字符串、布尔值 不能判断: null与object
JavaScript高级篇
AER的故事的博客
03-13 115
JavaScript高级学习（一）
LY
04-27 868
JS基础大纲复习 JavaScript简称JS JS分为三部分 1.ECMAScript标准----基础的语法 2.DOM Document Object Model------文档对象模型 3.BOM Browser Object Model-------浏览器对象模型 什么是JS？ 是一门脚本语言 是一门解释性语言 是一门弱类型语言 是一门动态类型语言 动态页面：（可分为两种） 1....
JS高级篇 浏览器深入解析、正则表达式、JS面向对象编程、JS函数进阶
qq_40877709的博客
07-27 263
一、浏览器深入解析 1.浏览器组成 浏览器从原理上分为七个模块，分别是User Interface（用户界面）、Browser engine（浏览器引擎）、Rendering engine（渲染引擎）、Networking（网络）、JavaScript Interpreter（js解释器）、UI Backend（UI后端）、Date Persistence（数据持久化存储）。 2.浏览器内核 内核分为渲染引擎和js引擎。渲染引擎主要负责 HTML、CSS 的解析，页面布局、渲染与复合层合成。JavaScr
JavaScript高级工程师学习资料
10-27
必须具备一定的js基础。提升自己的js能力，适合中高级前端开发阅读，作者6年以上的前端开发经验，深入理解js原理。只需要围绕着思维导图学习即可，不需要看N多个视频。
JavaScript高级
Major_S的博客
01-30 312
JavaScript高级
javascript高级四篇
qq_44788119的博客
02-19 136
1:作用域分类 全局作用域，函数作用域 2:作用域作用 隔离变量，不同的作用域下同名变量不会有冲突 3:作用域和上下文的区别 1： 全局作用域之外，每个函数都会创建自己的作用域，作用域在函数定义的时候就已经确定了，而不是在函数调用时。 全局执行上下文是在全局作用域确定之后，js代码马上执行之前创建。 函数执行上下文是在调用函数时，函数体代码执行之前创建 2: 全局作用域是静态的，只要函数定义好了就一直存在，且不会再变化 执行上下文是动态的，在调用函数的时候创建，函数调用完毕时上下文就会释放 4:联系 执行上
【笔记】JavaScript高级篇——面向对象、原型、继承
weixin_34090562的博客
07-11 123
原文链接：http://www.hansmkiii.com/2018/07/06/javascript-node-1/ " 面向对象、原型、继承 " 1、面向对象 1.1 什么是面向对象程序设计 为了了解 面向对象 与 面向过程 的区别，我们先看案例1。 案例1：一辆汽车以60km/h，在一条长度1200km的公路上行驶，求其行驶完全程...
javascript高级篇笔记
花先生的博客
08-05 212
1、变量 .用于存放数据，存放的数据可以改变 .本质：变量本身也是数据，也需要在内存中占用空间，保存在内存的栈结构分区中。 2、常量 .用来保存数据，保存的数据不可以修改 .本质：常量本身也是数据。需要占用空间，保存在栈。 3、基本数据类型特点 .一旦定义了值是不会发生改变的。 4、typeof .检测数据类型，只能检测到String Number Boolean Undefined Function Object .假如用typeof检测，数组和null 返回值都是Object 5、inst
JavaScript高级（详细总结）
程序员阿龙的博客
08-19 2563
JavaScript高级（详细总结）
【前端】Javascript高级篇-面向对象
瑞新の博客：bennyrhys
05-28 912
面向对象 面向对象和过程的区别 大象放冰箱 面向过程 拆解方法，分步完成 面向对象 抽象对象，赋予功能 三特性 封装、继承、多态 封装：内部无需知道，封装使其变成可扫地的机器人 继承：扫把继承小车，变成扫地工具 多态：不仅可以扫地，立起来和风扇一样可以吹风 ...
JavaScript-高级进阶
tujunyong的博客
11-29 6403
day03-JavaScript高级 1、js的函数定义（三种方式）  一、使用关键字  function 方法名称(参数列表) { 方法体和返回值 }          注意1：参数列表中的参数不需要写类型（var），直接写参数名称          注意2：返回值，根据实际需要可以有也可以没有       例1：function test1() { alert("123456");}
JavaScript高级总结,看这篇准没错
weixin_43693458的博客
03-27 236
Javascript高级笔记 1. new创建对象的本质 function Person(name,age){ this.name = name; this.age = age; this.sayHi = function(){ return "Hello,I'm" + this.name; } } let John = new Person...
(精华)2020年7月3日 JavaScript高级篇 ES6(Symbol数据结构)
热门推荐
时光隧道
07-03 56万+
概念以及引入的原因 // 新提出的一个数据结构 Symbol 基本数据类型 // Symbol表示独一无二 第七种数据类型 // 对象的属性是字符串 对象的话隐式调用toString 转化成字符串 let a = {a:1}; let b = {b:2}; let c = {}; c[a] = 3; // [object Object] c[b] = 4; // [object Object] console.log(c); // ? 怎么解决 let s = Symbol() console.log(t
ES6学习笔记（十一）之函数的扩展3
...
09-16 116
name属性 匿名函数赋值给一个变量，ES5中的name属性返回空字符串，而ES6中的name属性返回实际的函数名（即赋值的变量名）。 具名函数无论有没有赋值给一个变量，name属性返回的是具名函数的名称。 Function构造函数返回的函数实例的name属性返回的值为anonymous。 bind返回的函数的name属性返回的值前面都会加上“ bound”前缀。 箭头函数 用法：使用 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值