有口碑的江苏网站建设,大连装修公司,域名有了怎么建网站,短剧小程序开发文章目录前言一、编程思想1.1 面向过程介绍1.2 面向对象编程 (oop)对比二、构造函数三、原型3.1原型3.2 constructor 属性3.3 对象原型3.4 原型继承3.5 原型链总结前言
#x1f191;学习目标
理解面向对象思想#xff0c;掌握函数原型对象运用面向对象封装继承特点#xf…
文章目录前言一、编程思想1.1 面向过程介绍1.2 面向对象编程 (oop)对比二、构造函数三、原型3.1原型3.2 constructor 属性3.3 对象原型3.4 原型继承3.5 原型链总结前言
学习目标
理解面向对象思想掌握函数原型对象运用面向对象封装继承特点封装确认框对话功能。
一、编程思想
1.1 面向过程介绍
面向过程就是分析出解决问题所需要的步骤然后用函数把这些步骤一步一步实现使用的 时候再一个一个的依次调用即可。 就是按照我们分析好步骤按照步骤解决问题
1.2 面向对象编程 (oop)
面向对象是把事务分解成一个个对象然后由对象之间分工与合作。 面向对象就是以对象功能来划分问题而不是步骤。
面向对象程序开发思想中每个对象都是功能中心具有明确分工。面向对象编程具有灵活代码可复用容易维护和开发的优点更合适多人合作的大型软件项目。 面向对象的特性 封装性 继承性 多态性 对比
⭕️面向过程编程
优点性能比面向对象高适合跟硬件联系很紧密的东西。例如单片机采用的面向过程编程。 缺点没有面向对象以维护易复用易扩展。
❌面向对象编程
优点易维护易复用由于面向对象由封装继承多态的特性。可以设计出低耦合的系统使系统更加灵活更加易维护。 缺点性能比面向过程低。
二、构造函数
封装使面向对象思想中比较重要的一部分js面向对象可以通过构造函数实现的封装。同样的将变量和函数组合到一起并通过this实现数据的共享所不同的使借助构造函数创建出来的实例对象之间是彼此不影响的。
// 构造函数 公共的属性和方法 封装到 Star 构造函数里面了// 1.公共的属性写到 构造函数里面function Star(uname, age) {this.uname unamethis.age agethis.sing function () {console.log(唱歌)}}const ldh new Star(刘德华, 55)const zxy new Star(张学友, 58)ldh.sing() //调用zxy.sing() //调用前面我们学过的构造函数方法很好用但是存在浪费内存的问题。 console.log(ldh zxy) // falseconsole.log(ldh.sing zxy.sing) // true三、原型
3.1原型
目标能够利用原型对象实现方法共享
构造函数通过原型分配的函数是所有对象所共享的Javascript 规定每一个构造函数都有一个prototype 属性指向一个对象所有也称为原型对象。这个对象可以挂载函数对象实例化不会多次创建原型上函数节约内存。把不变的方法直接定义在prototype对象上这样所有对象的实例化就可以共享这些方法。 代码如下示例
Function Star(uname,age)this,unameunamethis,ageage
console.log(Star.prototype)//返回一个对象称为原型对象
Star.prototype.sing function (){console.1og(我会唱歌)
}
const 1dhnew Star(刘德华18)
const zxynew5tar(张学友19)
console.1og(ldh.sing zxy.sing)
//结果是true说明俩函数一样共享3.2 constructor 属性
每一个原型对象都有一个constructor 属性 constructor 构造函数
使用场景如果有多个对象的方法我们可以给原型对象采取对象形式赋值。但是这样会覆盖构造函数原型对象原来的内容。
function star(name){this.namename
}
star.prototype {//手动利用construtor 指向 starconstrutor : star// 如果不指向 就会默认指向object console.log(star.prototype.constructor)//指向 objectsing : function()console.log(sing),dance : function()console.log(dance)
}
console.log(star.prototype.constructor)//指向原型对象star3.3 对象原型 思考 构造函数可以创建实例对象构造函数还有一个原型对象一些公共的属性或方法放到这个原型对象可以共享属性和方法 答对象都会有一个属性_proto_ 指向构造函数的 prototype原型对象 因为对象有_proto_ 原型的存在。 function Star() {}const ldh new Star()// 对象原型__proto__ 指向 改构造函数的原型对象console.log(ldh.__proto__) // objectconsole.log(ldh.__proto__ Star.prototype) // true// 对象原型里面有constructor 指向 构造函数 Starconsole.log(ldh.__proto__.constructor Star) // true❌注意 _proto _ 是JS非标准属性[{prototype}] 和 proto 意义相同用来表明当前实例对象指向哪个原型对象prototypeproto 对象原型里面有一个constructor属性指向创建该实例对象的构造函数 3.4 原型继承
通过继承进一步提升代码封装的程度JavaScript大多是借助原型对象实现继承的特性。 function Man(){this.head 1;this.eyes 2;this.legs 2;this.say function (){}this.eat function (){}} const pink new Man()console.log(pink)// Man 对象✊ 封装–抽取公共部分
让男人和女人都能继承人类的一些属性和方把男人女人公共的属性和方法抽取出来 People然后赋值给Man的原型对象可以共享这些属性和方法注意让constructor指回Man这个构造函数 //人类const People {head:1,eyes:2,legs:2,say:function (){},eat:function (){}}//男人function Man(){}// 把公共的属性和方法给原型这样就可以共享Man.prototype People//让原型里面的constructor 从新指向Man找父级Man.prototype.constructorManconst pink new Man()console.log(pink) 男人和女人都同时使用了同一个对象根据引用类型的特点他们指向同一个对象修改一个就会都影响。 如果男人添加吸烟的方法女人的对象原型也会添加。
Man.prototype.smoking function(){}完善继承写法即消除原型对象指向同一个固定对象。
function Man(){}
Man.prototype new Person()
// 让原型里面的constructor 从新指向找自己的父级
Man.prototype.constructor Man
Man.prototype.smoking function(){}
console.log(Man)3.5 原型链
基于原型对象的继承使得不同构造函数的原型对象关联在一起并且这个关联的关系是一种链状的结构我们将原型对象的链状结构关系称为原型链。
查找规则
当访问一个对象的属性包括方法时首先查找这个对象自身有没有该属性。如果没有就查找它的原型即_proto_ 指向的 prototype 原型对象如果还没有就查找原型对象的原型即Object对象一次类推一直找到Object 为止_ proto_ 对象原型的意义就只在于为对象成员查找机制提供一个方向或者说一条路线。
总结
这章理解面向对象思路并且掌握函数原型对象 会用面向对象封装继承特点实现封装方法的使用。