js面向对象编程_生成三台笔记本电脑实现, 调用电脑的开始和关闭方法js面向对象编程-CSDN博客

本文链接：https://blog.csdn.net/krtuartier/article/details/73825199

js面向对象编程

一、什么是面向对象

1.什么是对象

个人的见解：
对象是一个万变的可塑性个体，并可赋予其各种能力。

2.什么是面向对象

面向对象分为两种：
①专注于使用对象提供的功能
②专注于构造对象的内部细节

二、面向对象编程的特点

抽象：抓住核心问题，进行最恰当、最简化的定义
封装：不考虑内部实现，只考虑功能使用
继承：从已有对象上，继承对象的方法和属性，并且可以增加新的方法和属性

三、对象的组成
1.属性——变量：状态、静态的
2.方法——函数：过程、动态的

var a=new Object();
//1.给对象添加属性例如
a.b=2;
a[1]=1;
a.json={json1:1,json2:2};
console.log(a);
//console.log输出Object {1: 1, b: 2, json: Object}

//给对象添加方法例如
a.afn=function(){
    console.log(a);
}
a.afn();
//调用方法，console.log输出Object {1: 1, b: 2, json: Object, afn: function}

四、写一个面向对象程序

1.为对象添加方法和属性

要注意两点：
①事件处理中this的本质

//如在javascript内最外层的this
console.log(this);
//console.log输出结果Window

②不能在系统对象中随意附加方法、属性，否则会覆盖已有方法、属性

//如方法名叫alert
alert=function(a){
    console.log(a);
}
alert(123);
//输出的是console.log(123)的结果,alert被直接修改

demo01

//工厂方式的基础写法
function creatCharacter(name,sex,professional){
    //原料
    var obj=new Object();
    //加工
    obj.name=name;
    obj.sex=sex;
    obj.professional=professional;
    obj.showName=function(){
        console.log(this.name);
    }
    obj.showSex=function(){
        console.log(this.sex);      
    }
    obj.showProfessional=function(){
        console.log(this.professional);
    }
    //出厂
    return obj;
}
var obj1=creatCharacter('Beatrice','female','witch');
var obj2=creatCharacter('McRae','male','gunner');
//console.log检查创建的两个对象
console.log(obj1);
console.log(obj2);
//调用对象自身的方法例如
obj1.showName();
obj2.showName();

工厂方式基础写法的缺点
1.没有用new进行新建
2.函数重复定义

解决第一个缺点
demo02

//工厂方式的写法优化,方法内部不进行new,使用new的方法命名开头一般使用大写
function CreatCharacter(name,sex,professional){
    this.name=name;
    this.sex=sex;
    this.professional=professional;
    this.showName=function(){
        console.log(this.name);
    }
    this.showSex=function(){
        console.log(this.sex);      
    }
    this.showProfessional=function(){
        console.log(this.professional);
    }
}
//在创建对象时使用new进行新建
var obj1=new CreatCharacter('Beatrice','female','witch');
var obj2=new CreatCharacter('McRae','male','gunner');
//console.log检查创建的两个对象
console.log(obj1);
console.log(obj2);
//调用对象自身的方法例如
obj1.showName();
obj2.showName();

函数定义重复见的检测：

//先输出两个对象的使用的共同的方法
console.log(obj1.showName);
console.log(obj2.showName);
//输出均为
function (){
    console.log(this.name);
}
//但是进行比较
console.log(obj1.showName==obj2.showName);
//会发现返回的是false

这是因为虽然是相同的方法，但是没有在对象的原型上进行方法的定义，所以实际上是定义了两个相同的方法，占用了两倍的系统资源

解决第二个缺点
demo03

//创建对象的方法只保留属性
function CreatCharacter(name,sex,professional){
    this.name=name;
    this.sex=sex;
    this.professional=professional;
}
//对这一个类的对象的原型上添加方法
CreatCharacter.prototype.showName=function(){
    console.log(this.name);
}
CreatCharacter.prototype.showSex=function(){
    console.log(this.sex);      
}
CreatCharacter.prototype.showProfessional=function(){
    console.log(this.professional);
}
var obj1=new CreatCharacter('Beatrice','female','witch');
var obj2=new CreatCharacter('McRae','male','gunner');
//console.log检查创建的两个对象
console.log(obj1);
console.log(obj2);
//调用对象自身的方法
obj1.showName();
obj2.showName();
//对两个同类对象的相同方法进行比较
console.log(obj1.showName==obj2.showName);
//会发现返回的是true，不再占用多余的系统资源

以上的解决方法是同时运用构造函数和原型方式的混合方式构造对象

五、最后写一个简单的面向对象编程的应用实例
简单的选项卡
demo04

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/reset.css"/>
        <style type="text/css">
            #box,#box1{
                width: 300px;
                overflow: hidden;
                margin: 20px auto;
                position: relative;
            }
            #box ul,#box1 ul{
                overflow: hidden;
                width: 300px;
                height: 300px;
            }
            #box ul li,#box1 ul li{
                cursor: pointer;
                float: left;
                width: 100px;
                height: 50px;
                text-align: center;
                line-height: 50px;
                background-color: cornflowerblue;
                color: #ffffff;
                border: 1px solid #FFFFFF;
                box-sizing: border-box;
                transition: all .5s linear;
            }
            .b{
                transition: all .5s linear;
            }
            #box ul .active,#box1 ul .active{
                background-color: #D58512;
            }
            .box1,.box2,.box3{
                position: absolute;
                bottom: 0;
                left: 0;
                width: 300px;
                height: 250px;
                opacity: 0;
                filter: alpha(opacity:0);
                font-size: 50px;
                line-height: 250px;
                color: #ffffff;
                text-align: center;
                background-color: #D0011B;
            }
            .box1{
                opacity: 1;
                filter: alpha(opacity:100);
            }
        </style>
        <script type="text/javascript">
            window.onload = function() {
                var Tabs1=new Tabs('box');
                var Tabs2=new Tabs('box1');
            }
            function Tabs(id){
                var oBoxWrap=document.getElementById(id);
                this.aBoxs=oBoxWrap.querySelectorAll('.b');
                this.aLis=oBoxWrap.querySelectorAll('li');
                this.init();
            }
            Tabs.prototype.init=function(){
                var _this=this;
                for(var i=0;i<this.aLis.length;i++){
                    this.aLis[i].index=i;
                    this.aLis[i].onclick=function(){
                        _this.click(this);
                    }
                }
            }
            Tabs.prototype.click=function(aBtns){
                for (var i=0;i<this.aBoxs.length;i++) {
                    this.aBoxs[i].style.opacity=0;
                    this.aBoxs[i].style.filter='alpha(opacity:0)';
                    this.aLis[i].className='';
                }
                aBtns.className='active';
                this.aBoxs[aBtns.index].style.opacity=1;
                this.aBoxs[aBtns.index].style.filter='alpha(opacity:100)';
            }
        </script>
    </head>
    <body>
        <div id="box">
            <ul>
                <li class="active">1</li>
                <li>2</li>
                <li>3</li>
            </ul>
            <div class="box1 b">
                1
            </div>
            <div class="box2 b">
                2
            </div>
            <div class="box3 b">
                3
            </div>
        </div>
        <div id="box1">
            <ul>
                <li class="active">1</li>
                <li>2</li>
                <li>3</li>
            </ul>
            <div class="box1 b">
                1
            </div>
            <div class="box2 b">
                2
            </div>
            <div class="box3 b">
                3
            </div>
        </div>
    </body>
</html>