JavaScript面向对象基础

最新推荐文章于 2024-01-07 18:00:00 发布

可芭乐

最新推荐文章于 2024-01-07 18:00:00 发布

阅读量214

点赞数

分类专栏： JavaScript基础文章标签： javascript 面向对象

本文链接：https://blog.csdn.net/a839371666/article/details/54969401

版权

JavaScript基础专栏收录该内容

37 篇文章 0 订阅

订阅专栏

什么是面向对象

什么是对象
什么是收音机
不了解内部的结构，知道表面的各种操作（按钮）
对象是一个整体，对外提供一些操作
什么是面向对象
使用对象时，只关注对象提供的功能，不关注其内部细节
比如JQuery
面向对象是一种通用思想，并非只有编程中能用，任何事情都可以用

js中的面向对象

面向对象编程（OOP）的特点
抽象：抓住核心问题
封装：不考虑内部实现，只考虑功能使用
继承：从已有对象上，继承出新的对象
多重继承
多态
对象的组成
方法——函数：过程、动态的：属性属于一个对象
属性——变量：状态、静态的
变量：不属于任何一个对象，自由的

第一个面向对象程序

为对象添加方法和属性
this详解，事件处理中this的本质
this：当前的方法属于谁就是谁
当前发生的事件的对象
window
this—— 函数属于谁

    function show(){
        alert(this);
    }
    show();

结果为object window；
不能再系统对象中随意附加方式、属性，否则会覆盖已有的方式、属性
object对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<script type="text/javascript">
function createPerson(name, qq)//构造函数
{   //原料
    var obj = new Object ();

    obj.name = name;
    obj.qq = qq;

    obj.showName = function (){
        alert('我的名字叫：' + this.name);
    }
    obj.showQQ = function (){
        alert('我的QQ：' + this.qq);
    }
        //出厂
    return obj;
}

var obj = createPerson('blue', '1345')

obj.showName();
obj.showQQ();

var obj2 = createPerson('cdscs', '43252')

obj2.showName();
obj2.showQQ();
</script>
</head>
<body>

</body>
</html>

工厂方式

什么是工厂
原料：创建元素
加工
出厂返回值
工厂方式
用构造函数创建一个类
什么是类、对象（实例）：模具和零件

工厂方式的问题

问题
没有new
函数重复定义
加上new
偷偷做了两件事
替你创建了一个空白对象
替你返回了这个对象
new和this
将var obj = createPerson('blue', '1345')改成var obj = new createPerson('blue', '1345')则可以省略最开始的定以及之后的返回值

原型——prototype

什么是原型
原型是class，修改他可以影响一类元素
在已有对象中加入自己的属性、方法
原型修改对已有对象的影响
为Array添加sum方法
给对象添加方法，类似于行间样式
给原型添加方法，类似于class

var arr1 = new Array(12,45,78,56);
    var arr2 = new Array(88,11,22);

    Array.prototype.sum = function(){
        var result = 0;

        for (var i = 0; i < this.length; i++) {
            result += this[i];
        };
        return result;
    }
    alert(arr1.sum());
    alert(arr2.sum());

可以避免函数重复，一组元素加样式

function createPerson(name, qq)//构造函数
{   
    this.name = name;
    this.qq = qq;
}

createPerson.prototype.showName = function (){
    alert('我的名字叫：' + this.name);
}
createPerson.prototype.showQQ = function (){
    alert('我的QQ：' + this.qq);
}
var obj = new createPerson('blue', '1345');
var obj2 = new createPerson('cdscs', '43252');

obj.showName();
obj.showQQ();

obj2.showName();
obj2.showQQ();