wordpress网站托管,旅行社网站建设规划书,第1模板网,做网站ps图片都是多大看文章可以得到的收获#xff1a;
1.在日常开发中#xff0c;我们在声明一个数组对象后#xff0c;没有声明有map#xff0c;filter等方法#xff0c;为什么可以调用这些方法呢#xff1f;
2. 什么是面向过程思想#xff0c;什么是面向对象思想呢#xff1f;
3.JS中…看文章可以得到的收获
1.在日常开发中我们在声明一个数组对象后没有声明有mapfilter等方法为什么可以调用这些方法呢
2. 什么是面向过程思想什么是面向对象思想呢
3.JS中如何实现面向对象的封装思想的
4.什么是JS中的原型
5.JS中的原型链是如何串起来的
.... 编程思想
在程序开发中有二种常见的编程思想分别是面向过程和面向对象像c语言就是一种面向过程的语言而Java则是面向对象的典型代表 面向过程
面向过程就是分析出解决问题所需要的步骤然后用函数把这些步骤一步一步实现使用的时候再一个一个的依次 调用就可以了。
例子需求我要蛋炒饭
先准备好米饭-》开始炒蛋-》加入配菜-》将米饭和配菜饭一起炒--》蛋炒饭 面向过程就是按照我们分析好了的步骤按照步骤解决问题。 面向对象
面向对象是把事务分解成为一个个对象然后由对象之间分工与合作。
例子需求我要吃蛋炒饭
就把蛋炒饭看成一个对象,我们如何得到这个对象呢可以通过外卖或者饭店等等来得到这个对象而不是自己一步一步取实现。 面向对象是以对象功能来划分问题而不是步骤。 简单概括面对过程就是将问题分解成一个一个的步骤然后按步骤取解决问题而面对对象则是将问题封装成一个对象将得到对象的过程也封装成对象最后通过对象解决问题
所以什么是面向过程什么是面向对象到这里应该就懂了 面向过程和面向对象的对比 生活想吃蛋炒饭可以自己做也可以取饭店吃选择不同而已只不过前端不同于其他语言面向过程更多 构造函数
封装是面向对象思想中比较重要的一部分js面向对象可以通过构造函数实现的封装。
同样的将变量和函数组合到了一起并能通过 this 实现数据的共享所不同的是借助构造函数创建出来的实例对象之 间是彼此不影响的 前面我们学过的构造函数方法很好用但是 存在浪费内存的问题 使用Star构造函数创建出来的对象是不同的对象调用sing方法是一样的但确占用了二分内存这就存在浪费内存的问题? 我们希望所有的对象使用同一个函数这样就比较节省内存那么我们要怎样做呢 原型(重点)
• 原型
JS中的原型一般指原型对象可以用来共享数据
构造函数通过原型分配的函数是所有对象所 共享的。JavaScript 规定每一个构造函数都有一个 prototype 属性指向另一个对象所以我们也称为原型对象这个对象可以挂载函数对象实例化不会多次创建原型上函数节约内存我们可以把那些不变的方法直接定义在 prototype 对象上这样所有对象的实例就可以共享这些方法。 构造函数和原型对象中的this 都指向 实例化的对象 构造函数和原型对象中的this 都指向 实例化的对象 练习
给数组扩展方法
①给数组扩展求最大值方法和求和方法 比如 以前学过 const arr [1,2,3] arr.reverse() 结果是 [3,2,1] 扩展完毕之后 arr.sum() 返回的结果是 6 总结 1. 原型是什么 一个对象我们也称为 prototype 为原型对象 2. 原型的作用是什么 共享方法可以把那些不变的方法直接定义在 prototype 对象上 3. 构造函数和原型里面的this指向谁 实例化的对象 • constructor 属性
在哪里 每个原型对象里面都有个constructor 属性constructor 构造函数
作用该属性指向该原型对象的构造函数 简单理解就是指向我的爸爸我是有爸爸的孩子 使用场景
如果有多个对象的方法我们可以给原型对象采取对象形式赋值.
但是这样就会覆盖构造函数原型对象原来的内容这样修改后的原型对象 constructor 就不再指向当前构造函数了 此时我们可以在修改后的原型对象中添加一个 constructor 指向原来的构造函数。 思考
构造函数可以创建实例对象构造函数还有一个原型对象一些公共的属性或者方法放到这个原型对象身上 但是 为啥实例对象可以访问原型对象里面的属性和方法呢 • 对象原型
对象都会有一个属性 __proto__ 指向构造函数的 prototype 原型对象之所以我们对象可以使用构造函数 prototype 原型对象的属性和方法就是因为对象有 __proto__ 原型的存在。 注意
__proto__ 是JS非标准属性[[prototype]]和__proto__意义相同用来表明当前实例对象指向哪个原型对象prototype__proto__对象原型里面也有一个 constructor属性指向创建该实例对象的构造函数
总结 1. prototype是什么哪里来的 原型原型对象 构造函数都自动有原型 2. constructor属性在哪里作用干啥的 prototype原型和对象原型__proto__里面都有 都指向创建实例对象/原型的构造函数 3. __proto__属性在哪里指向谁 在实例对象里面 指向原型 prototype • 原型继承面试常问
继承是面向对象编程的另一个特征通过继承进一步提升代码封装的程度JavaScript 中大多是借助原型对象实现继承 的特性。
龙生龙、凤生凤、老鼠的儿子会打洞描述的正是继承的含义。
我们来看个代码 1. 封装-抽取公共部分 2. 继承-让男人和女人都能继承人类的一些属性和方法 3. 问题
如果我们给男人添加了一个吸烟的方法发现女人自动也添加这个方法 4. 问题--原因
男人和女人都同时使用了同一个对象根据引用类型的特点他们指向同一个对象修改一个就会都影响 5. 解决
需求男人和女人不要使用同一个对象但是不同对象里面包含相同的属性和方法 答案构造函数 new 每次都会创建一个新的对象 5. 继承写法完善 总结 如何实现原型继承
1 声明公共部分构造函数 B
2 声明女人的构造函数 B
3 B.prototype 公共部分的实例化对象 new 公共部分构造函数 ()
4 B.prototype.constructor B 这样子就实现了JS中的原型继承其实Js的原型继承和Java的继承思想是一样的但Java中是通过extends关键字来实现的 • 原型链面试常问
基于原型对象的继承使得不同构造函数的原型对象关联在一起并且这种关联的关系是一种链状的结构我们将原型对 象的链状结构关系称为原型链 原型链-查找规则
① 当访问一个对象的属性包括方法时首先查找这个对象自身有没有该属性。 ② 如果没有就查找它的原型也就是 __proto__指向的 prototype 原型对象 ③ 如果还没有就查找原型对象的原型Object的原型对象 ④ 依此类推一直找到 Object 为止null ⑤ __proto__对象原型的意义就在于为对象成员查找机制提供一个方向或者说一条路线 ⑥ 可以使用 instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上 这个就和java中的继承中变量的查找类似优先查找当前类是否有对象没有则向上查找最后查不到就返回null但不同的是java还有修饰符的概念会对继承的变量进行显示还有就是java中关联父类是通过关键字super来实现的从而形成关系链而Js是通过对象原型__proto__对象来实现的 所以这就明白为什么我们创建的数组对象尽管没有创建有map方法却可以调用因为我们创建的数组对象的原型对象(prototype)的对象原型__proro__是Array,而Array中有对应得map方法所以就可以用了 综合案例
消息提示对象封装
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /title面向对象封装消息提示/titlestyle.modal {width: 300px;min-height: 100px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);border-radius: 4px;position: fixed;z-index: 999;left: 50%;top: 50%;transform: translate3d(-50%, -50%, 0);background-color: #fff;}.modal .header {line-height: 40px;padding: 0 10px;position: relative;font-size: 20px;}.modal .header i {font-style: normal;color: #999;position: absolute;right: 15px;top: -2px;cursor: pointer;}.modal .body {text-align: center;padding: 10px;}.modal .footer {display: flex;justify-content: flex-end;padding: 10px;}.modal .footer a {padding: 3px 8px;background: #ccc;text-decoration: none;color: #fff;border-radius: 2px;margin-right: 10px;font-size: 14px;}.modal .footer a.submit {background-color: #369;}/style
/headbodybutton iddelete删除/buttonbutton idlogin登录/button!-- div classmodaldiv classheader温馨提示 ix/i/divdiv classbody您没有删除权限操作/div/div --script//抽取一个公共的原型对象Modelfunction Model(title,msg){ //显示消息框this.box document.createElement(div)this.box.className modal//追加子元素this.box.innerHTML div classheader${title} ix/i/divdiv classbody${msg}/div}Model.prototype.open function(){//显示消息框// const div document.createElement(div)// div.className modal// //追加子元素// div.innerHTML // div classheader${this.title} ix/i/div// div classbody${this.msg}/div// document.querySelector(body).append(this.box)//绑定关闭方法document.querySelector(.header i).addEventListener(click,(){//调用关闭// this 箭头函数没有this当前this指向的是函数的上一级作用域的this//上一次作用域指向实例对象this.close()})}//关闭方法Model.prototype.close function(){//移除对象this.box.remove()}//为删除按钮设置监听事件document.querySelector(#delete).addEventListener(click,(){// console.log(11)//声明消息框对象new Model(温馨提示,您没有删除权限操作).open()})//为删除按钮设置监听事件document.querySelector(#login).addEventListener(click,(){// console.log(11)//声明消息框对象new Model(温馨提示,您还没有登录).open()})/script
/body/html
