一篇文章带你了解JavaScript中的面向 “对象”
- 2020 年 1 月 3 日
- 筆記
file
作者 | Jeskson
来源 | 达达前端小酒馆
安装webpack，打包工具，安装webpack-dev-server，安装babel解析es6语法，初始化npm环境。
npm install webpack webpack-cli --save-dev
webpack.dev.config.js
module.exports = { entry: './src/index.js', output: { path: __dirname, filename: './release/bundle.js' } }
index.js
class Person { constructor(name) { this.name = name } getName() { return this.name } } let p = new Person('dada') console.log(p.getName());
什么是面向对象？
面向对象的三要素：继承，封装，多态。
// 类 class People { constructor(name, age) { this.name = name; this.age = age; } eat() { console.log('eat'); } speak() { console.log('speak'); } }
对象（实例）
// 创建实例 let dada = new People('dada', 12); dada.eat(); dada.speak(); // 创建实例 let tudi = new People('da1', 12); tudi.eat(); tudi.speak();
继承，子类继承父类，封装，数据的权限和保密，多态，同一接口不同实现。
继承的案例，父类
// 父类 class People { constructor(name,age) { this.name = name this.age = age } eat() { console.log('eat'); } speak() { console.log('speak'); } }
子类继承父类
class Student extends People { constructor(name, age, number) { super(name, age); this.number = number; } study() { console.log('study'); } }
实例
let dada = new Student('dada',12,'web'); dada.study(); console.log(dada.number); dada.eat();
父类是公共的，不仅服务与一个子类，继承可以将公共方法抽离出来，提高代码的复用性，减少多余的代码重复。
封装
public 完全开放，protected 对子类开放，private 对自己开发
父类
class People { name age protected weight constructor(name, age) { this.name = name this.age = age this.weight = 12 } eat() { console.log('eat'); } speak() { console.log('speak'); } }
class Student extends People { number private girlfriend constructor(name, age, number) { super(name, age, number) { super(name, age) this.number = number this.girlfriend = 'dada' } study() { console.log('study'); } getWeight() { console.log('getWeight'); } } }
减少耦合，不该外露的不外露，利于数据，接口的权限管理。
多态
class People { constructor(name) { this.name = name } saySomething() { } } class A extends People { constructor(name) { super(name); } saySomething() { console.log('dada'); } }
class B extends People { constructor(name) { super(name) } saySomething() { console.log('da1'); } } let a = new A('a'); a.saySomething(); let b = new B('b'); b.saySomething();
JS应用案例
class jQuery { constructor(selector) { let slice = Array.prototype.slice let dom = slice.call(document.querySelectorAll(selector)) let len = dom ? dom.length : 0 for(let i=0; i<len; i++){ this[i] = dom[i] } this.lenght = len; this.selector = selector || '' } append(node){ } addClass(name){ } html(data){ } }
window.$ = function(selector) { return new jQuery(selector) } var $p = $('p'); console.log($p) console.log($p.addClass);
index.js
class jQuery { // jquery如何使用面向对象 constructor(selector) { let slice = Array.prototype.slice let dom = slice.call(document.querySelectorAll(seletor)) let len = dom ? dom.length : 0 for(let i=0; i<len; i++){ this[i] = dom[i] } this.length = len this.seletor = seletor || '' } append(node) { } addClass(name) { } html(data){ } } window.$ = function(selector){ return new jQuery(selecor) }
在博客平台里，未来的路还很长，也希望自己以后的文章大家能多多支持，多多批评指正，我们一起进步，一起走花路。
非常感谢读者能看到这里，如果这个文章写得还不错，觉得「达达」我有点东西的话，觉得我能够坚持的学习，觉得此人可以交朋友的话， 求点赞? 求关注❤️ 求分享? 对暖男我来说真的
非常有用！！！
❤️ 不要忘记留下你学习的脚印 [点赞 + 收藏 + 评论]
作者Info：
【作者】：Jeskson 【原创公众号】：达达前端小酒馆。 【福利】：公众号回复 “资料” 送自学资料大礼包（进群分享，想要啥就说哈，看我有没有）！ 【转载说明】：转载请说明出处，谢谢合作！~
大前端开发，定位前端开发技术栈博客，PHP后台知识点，web全栈技术领域，数据结构与算法、网络原理等通俗易懂的呈现给小伙伴。谢谢支持，承蒙厚爱！！！
若本号内容有做得不到位的地方（比如：涉及版权或其他问题），请及时联系我们进行整改即可，会在第一时间进行处理。
请点赞！因为你们的赞同/鼓励是我写作的最大动力！
欢迎关注达达的CSDN！
这是一个有质量，有态度的博客
前端技术栈
