作者 | 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)
}
在博客平台里，未来的路还很长，也希望自己以后的文章大家能多多支持，多多批评指正，我们一起进步，一起走花路。
非常感谢读者能看到这里，如果这个文章写得还不错，觉得「达达」我有点东西的话，觉得我能够坚持的学习，觉得此人可以交朋友的话， 求点赞
以上是关于一篇文章带你了解JavaScript中的面向 “对象”的主要内容，如果未能解决你的问题，请参考以下文章
一篇文章带你了解JavaScript中的语法，数据类型，流程控制语句以及函数
一篇文章带你了解JavaScript中的基础算法之“字符串类”