无锡网站制作建设,凡科建站手机版登录,科技创新的重要前沿是,wordpress 缩略图 插件站在巨人的肩膀上 黑马程序员前端JavaScript入门到精通全套视频教程#xff0c;javascript核心进阶ES6语法、API、js高级等基础知识和实战教程 #xff08;十四#xff09;深入面向对象
1. 编程思想
1.1 面向过程介绍
面向过程就是分析出解决问题所需要的步骤#xff0c…站在巨人的肩膀上 黑马程序员前端JavaScript入门到精通全套视频教程javascript核心进阶ES6语法、API、js高级等基础知识和实战教程 十四深入面向对象
1. 编程思想
1.1 面向过程介绍
面向过程就是分析出解决问题所需要的步骤然后用函数把这些步骤一步一步实现使用的时候再一个一个的依次调用就可以了。面向过程就是按照我们分析好了的步骤按照步骤解决问题。
1.2 面向对象介绍
面向对象是把事务分解成为一个个对象然后由对象之间分工与合作。面向对象是以对象功能来划分问题而不是步骤。在面向对象程序开发思想中每一个对象都是功能中心具有明确分工。面向对象编程具有灵活、代码可复用、容易维护和开发的优点更适合多人合作的大型软件项目。面向对象的特性 封装性继承性多态性
1.3 面向过程和面向对象的对比
面向过程编程 优点性能比面向对象高适合跟硬件联系很紧密的东西例如单片机就采用的面向过程编程。缺点没有面向对象易维护、易复用、易扩展 面向对象编程 优点易维护、易复用、易扩展由于面向对象有封装、继承、多态性的特性可以设计出低耦合的系统使系统 更加灵活、更加易于维护缺点性能比面向过程低
2. 构造函数
封装是面向对象思想中比较重要的一部分js面向对象可以通过构造函数实现的封装。同样的将变量和函数组合到了一起并能通过 this 实现数据的共享所不同的是借助构造函数创建出来的实例对象之间是彼此不影响的总结 构造函数体现了面向对象的封装特性构造函数实例创建的对象彼此独立、互不影响 封装是面向对象思想中比较重要的一部分js面向对象可以通过构造函数实现的封装。面向对象编程的特性比如封装性、继承性等可以借助于构造函数来实现前面我们学过的构造函数方法很好用但是存在浪费内存的问题function Star(uname, age) {this.uname uname;this.age age;this.sing function() {console.log(我会唱歌);}
}
const ldh new Star(刘德华, 18)
const zxy new Star(张学友, 19)
console.log(ldh.sing zxy.sing) // 结果为 false说明俩函数不一样我们希望所有的对象使用同一个函数这样就比较节省内存那么我们要怎样做呢
3. 原型
3.1 原型
构造函数通过原型分配的函数是所有对象所共享的。JavaScript 规定每一个构造函数都有一个 prototype 属性指向另一个对象所以我们也称为原型对象这个对象可以挂载函数对象实例化不会多次创建原型上函数节约内存我们可以把那些不变的方法直接定义在 prototype 对象上这样所有对象的实例就可以共享这些方法。构造函数和原型对象中的 this 都指向实例化的对象。例子function Star(uname, age) {this.uname uname;this.age age;
}
console.log(Star.prototype) // 返回一个对象称为原型对象
Star.prototype.sing function() {console.log(我会唱歌);
}
const ldh new Star(刘德华, 18)
const zxy new Star(张学友, 19)
console.log(ldh.sing zxy.sing) // 结果为 true说明俩函数一样共享3.2 constructor 属性
每个原型对象里面都有个 constructor 属性constructor 构造函数作用该属性指向该原型对象的构造函数。使用场景 如果有多个对象的方法我们可以给原型对象采取对象形式赋值.但是这样就会覆盖构造函数原型对象原来的内容这样修改后的原型对象 constructor 就不再指向当前构造函数了此时我们可以在修改后的原型对象中添加一个 constructor 指向原来的构造函数。 例子function Star(name) {this.name name
}
Star.prototype {sing: function() { console.log(唱歌) },dance: function() { console.log(跳舞) }
}
console.log(Star.prototype.constructor) // 指向 Objectfunction Star(name) {this.name name
}
Star.prototype {// 手动利用 constructor 指回 Star 构造函数constructor: Star,sing: function() { console.log(唱歌) },dance: function() { console.log(跳舞) }
}
console.log(Star.prototype.constructor) // 指向 Star3.3 对象原型
对象都会有一个属性 __proto__指向构造函数的 prototype 原型对象之所以我们对象可以使用构造函数 prototype 原型对象的属性和方法就是因为对象有 __proto__原型的存在。注意 __proto__是JS非标准属性[[prototype]]和__proto__意义相同用来表明当前实例对象指向哪个原型对象prototype__proto__对象原型里面也有一个 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()function Woman() {this.head 1;this.eyes 2;this.legs 2;this.say function() {},this.eat function() {},this.baby function() {}
}
const red new Woman()对上面例子进行改造 封装-抽取公共部分 把男人和女人公共的部分抽取出来放到人类里面。 继承-让男人和女人都能继承人类的一些属性和方法 把男人女人公共的属性和方法抽取出来 People然后赋值给Man的原型对象可以共享这些属性和方法注意让constructor指回Man这个构造函数 问题 如果我们给男人添加了一个吸烟的方法发现女人自动也添加这个方法。原因男人和女人都同时使用了同一个对象根据引用类型的特点他们指向同一个对象修改一个就会都影响解决男人和女人不要使用同一个对象但是不同对象里面包含相同的属性和方法。 继承写法完善 最后代码const People {head: 1;eyes: 2;legs: 2;say: function() {},eat: function() {}
}// 男人
function Man() {
}
// 用 new Person() 替换刚才的固定对象
Man.prototype new Person()
// 注意让原型里面的constructor重新指回Man
Man.prototype.constructor Man
const pink new Man()
Man.prototype.smoking function() {}
console.log(pink)// 女人
function Woman() {this.bady function() {}
}
// 用 new Person() 替换刚才的固定对象
Woman.prototype new Person()
// 注意让原型里面的constructor重新指回Woman
Woman.prototype.constructor Woman
const red new Woman()
console.log(red)思路真正做这个案例我们的思路应该是先考虑大的后考虑小的 人类共有的属性和方法有那些然后做个构造函数进行封装一般公共属性写到构造函数内部公共方法挂载到构造函数原型身上。男人继承人类的属性和方法之后创建自己独有的属性和方法女人同理
3.5 原型链
基于原型对象的继承使得不同构造函数的原型对象关联在一起并且这种关联的关系是一种链状的结构我们将原型对象的链状结构关系称为原型链原型链-查找规则 当访问一个对象的属性包括方法时首先查找这个对象自身有没有该属性。如果没有就查找它的原型也就是 __proto__指向的 prototype 原型对象如果还没有就查找原型对象的原型Object的原型对象依此类推一直找到 Object 为止null__proto__对象原型的意义就在于为对象成员查找机制提供一个方向或者说一条路线可以使用 instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上
