唯品秀前端博客
当前位置: 前端开发 > JavaScript >

由浅入深结合实际开发实例理解JavaScript面向对象

作者：管理员 2021-01-04 10:09:42 分类：JavaScript 阅读（2366） 0

我们都听说过面向对象，但实际在工作中可能写的不是很多，但不可否认它的重要性，当然，面向对象只是一种编程思维，并不是说我们一定要去使用它，理解面向对象，对你编程肯定是极有帮助的，那么让我们一起来看看js中的面向对象吧

一切皆为对象

大家都听说过这句话，但你真的能理解吗？

1
var a = '10'

如何证明上述代码也是对象？首先要理解我们在使用对象时候，通常是可以拿到对象的属性或者方法，那么我们是不是利用上面变量a.leng拿到长度，通过a.split()拿到并使用了split方法，至此，你觉得上面这个变量也可以看做一个对象有问题吗？

函数和方法、属性和变量

js中有很多概念是一个东西，但在不同环境下给予了不同名字，如题，那到底什么时候叫函数，什么时候叫方法？以及属性和变量

1
2
3
4
5
6
7
8
9
10
11
var arr = [1,2,3];

// 一个普通sum函数
function sum(){
  console.log('函数')
}

// arr对象下的一个sum方法
arr.sum = function(){
  console.log('方法')
}
1
2
var a = '10'; // 定义一个变量a=10，没有歧义
console.log(window.a); // 同样还是上面那个a，但在这个时候，a叫属性，属于window下的全局变量属性

综上，我们可以看出当一个变量或者函数在自由自在状态下它就是变量或者函数，当被某个对象去调用的时候它就是属性或者方法。

原始模式

下面代码先把它理解为“原始模式”

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var obj = {};
obj.name = '小明';
obj.sex = '男';
obj.getName = function () {
  console.log(this.name)
}
obj.getSex = function () {
  console.log(this.sex)
}
obj.getName();
obj.getSex();

var obj2 = {};
obj2.name = '小花';
obj2.sex = '女';
obj2.getName = function () {
  console.log(this.name)
}
obj2.getSex = function () {
  console.log(this.sex)
}
obj2.getName();
obj2.getSex();

原始模式的改进：你肯定会想到将上面代码通过函数封装抽象，否则一旦实例数量多了，写起来就非常麻烦，那你可能会做下面的操作，通过写一个函数，解决代码重复的问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function fn(name, sex) {
    var name = name;
    var sex = sex;
    function getName() {
        console.log(name);
    };
    function getSex() {
        console.log(sex);
    }
    return {
        getName,
        getSex
    }
}

var fn1 = fn('小明', '男');
fn1.getName();
fn1.getSex();

var fn2 = fn('小花', '女')
fn2.getName();
fn2.getSex();

工厂模式

了解面向对象，你不得不提的就是工厂模式，你可以简单理解工厂模式是面向对象的“雏形”，下面通过实例来分析工厂模式的优缺点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function fn(name, sex) {
  // 原料
  var obj = new Object();
  // 加工
  obj.name = name;
  obj.sex = sex;
  obj.getName = function () {
    console.log('姓名:' + this.name)
  };
  obj.getSex = function () {
    console.log('性别:' + this.sex)
  };
  // 出厂
  return obj;
}

var fn1 = fn('小明', '男');
console.log(fn1.getName());
console.log(fn1.getSex());

var fn2 = fn('小花', '女');
console.log(fn2.getName());
console.log(fn2.getSex());

至此

剩余50%内容付费后可查看
本站所有文章、图片、资源等如无特殊说明或标注，均为来自互联网或者站长原创，版权归原作者所有；仅作为个人学习、研究以及欣赏！如若本站内容侵犯了原著者的合法权益，可联系我们进行处理，邮箱：343049466@qq.com
赞(2) 打赏
标签：

上一篇：

下一篇：

相关推荐

共 0 条评论关于"由浅入深结合实际开发实例理解JavaScript面向对象"

表情

最新评论

    暂无留言哦~~
谢谢你请我吃鸡腿*^_^*

支付宝扫一扫打赏

微信扫一扫打赏