JS面向对象学习

最新推荐文章于 2022-08-09 15:00:06 发布
最新推荐文章于 2022-08-09 15:00:06 发布
阅读量47 收藏
点赞数
原文链接：http://www.cnblogs.com/jiujiaoyangkang/p/5062125.html
版权

面向对象

抽象：抓住核心问题

封装：只能通过对象来访问方法

继承：从已有对象上继承新的对象

多态：多对象的不同形态

对象的组成：方法和属性

 

//var obj = {};
var obj = new Object();
obj.name = '小明';
obj.showName = function(){
    alert(this.name);
};
obj.showName();

优化上面的代码，工厂方式（封装函数）

function createPerson(name){
    // 1.原料
    var obj = new Object();
    // 2.加工
    obj.name = name;
    obj.showName = function(){
        alert(this.name);
    };
    // 3.出厂
    return obj;
}
var p1 = createPerson('小明');
p1.showName();
var p2 = createPerson('小强');
p2.showName();

改成和系统对象一样

//原型：去改写对象下面公用的方法或属性，让其在内存中只存在一份（提高性能）

function CreatePerson(name){
    this.name = name;
}

//之所以把方法加在原型上是为了解决p1.showName != p2.showName的问题
CreatePerson.prototype.showName = function(){
    alert(this.name);
};

//当new去调用一个函数，这个时候函数中得this就是创建出来的对象，而且函数的返回值直接就是this
var p1 = new CreatePerson('小明');
p1.showName();
var p2 = new CreatePerson('小强');
p2.showName();

面向对象的选项卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    #div1,#div2{
        width: 200px;
        margin: 20px auto;
    }
    #div1 .active,#div2 .active{
        background-color: yellow;
    }
    #div1 div,#div2 div{
        width: 200px;
        height: 200px;
        background-color: pink;
        color: black;
        display: none
    }
    </style>
</head>
<body>
    <div id="div1">
        <input class="active" type="button" value="1">
        <input type="button" value="2">
        <input type="button" value="3">
        <div style="display:block;">111</div>
        <div>222</div>
        <div>333</div>
    </div>
    <div id="div2">
        <input class="active" type="button" value="1">
        <input type="button" value="2">
        <input type="button" value="3">
        <div style="display:block;">111</div>
        <div>222</div>
        <div>333</div>
    </div>
    <script>

    function Tab(id){
        this.oDiv = document.getElementById(id);
        this.aInput = this.oDiv.getElementsByTagName('input');
        this.aDiv = this.oDiv.getElementsByTagName('div');
        this.iNow = 0;
    }
    Tab.prototype.init = function(){
        var This = this;
        for(var i = 0;i<this.aInput.length;i++){
            this.aInput[i].index = i;
            this.aInput[i].onclick = function(){
                This.iNow = this.index;
                This.change(this);
            };
        }
    };
    Tab.prototype.change = function(obj){
        for(var i = 0;i<this.aInput.length;i++){
            this.aInput[i].className = "";
            this.aDiv[i].style.display="none";
        }
        obj.className = "active";
        this.aDiv[obj.index].style.display = 'block';
    };
    Tab.prototype.autoPlay = function(){
        var This = this;
        setInterval(function(){
            if(This.iNow == This.aInput.length - 1){
                This.iNow = 0;
            }
            else{
                This.iNow++;
            }
            for(var i = 0;i<This.aInput.length;i++){
                This.aInput[i].className = "";
                This.aDiv[i].style.display="none";
            }
            This.aInput[This.iNow].className = "active";
            This.aDiv[This.iNow].style.display = 'block';
        },2000);
    };

    var tab1 = new Tab('div1');
    tab1.init();

    var tab2 = new Tab('div2');
    tab2.init();
    tab2.autoPlay();
    </script>
</body>
</html>

面向对象的拖拽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    #div1,#div2{
        width: 100px;
        height: 100px;
        position: absolute;
        top: 0;
        cursor: pointer;
    }
    #div1{
        left: 0;
        background-color: red;
    }
    #div2{
        left: 300px;
        background-color: yellow;
    }
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <script>
    function Drag(id){
        this.oDiv = document.getElementById(id);
        this.disX = 0;
        this.disY = 0;
    }
    Drag.prototype.init = function(){
        var This = this;
        this.oDiv.onmousedown = function(ev){
            var oEvent = ev||event;
            This.fnDowm(oEvent);
            return false;
        };
    };
    Drag.prototype.fnDowm = function(ev){
        this.disX = ev.clientX - this.oDiv.offsetLeft;
        this.disY = ev.clientY - this.oDiv.offsetTop;
        var This = this;
        document.onmousemove = function(ev){
            var oEvent = ev||event;
            This.fnMove(oEvent);
        };
        document.onmouseup = this.fnUp;//这里有风险
    };
    Drag.prototype.fnMove = function(ev){
        var x = ev.clientX - this.disX;
        var y = ev.clientY - this.disY;
        this.oDiv.style.left = x + "px";
        this.oDiv.style.top = y + "px";
    };
    Drag.prototype.fnUp = function(){
        document.onmousemove = document.onmouseup = null;
    };


    var drag1 = new Drag('div1');
    drag1.init();
    var drag2 = new Drag('div2');
    drag2.init();
    </script>
</body>
</html>

 .......................................................................

包装对象：基本类型都有自己对应的包装对象，例如String/Number/Boolean
原型链：实例对象与原型之间的链接

// hasOwnProperty()Object上的东西，看是不是对象自身下面的属性
var arr = [];
arr.num = 10;
Array.prototype.num2 = 20;
alert(arr.hasOwnProperty('num'));
alert(arr.hasOwnProperty('num2'));
alert(a1.hasOwnProperty == Object.prototype.hasOwnProperty); //证明是Obect上的，而非Array上的

关于constructor

// constructor查看实例对象的构造函数，每个对象会自动在原型上添加constructor指向对象
function Aaa(){

}
Aaa.prototype.constructor = Aaa; //程序自动生成
var a1 = new Aaa();
alert(a1.constructor);
alert(a1.hasOwnProperty == Object.prototype.hasOwnProperty); //Obect上的

var arr = [];
alert(arr.constructor == Array); //利用constructor判断是不是数组
function Aaa(){

}
//是添加，constructor是默认自带的Aaa
Aaa.prototype.name = '小明';
Aaa.prototype.age = 20;

//是赋值，会把Aaa.prototype.constructor覆盖掉，constructor是最顶端Object
Aaa.prototype = {
    'constructor':Aaa, //解决办法
    'name':'小明',
    'age':20
};
var a1 = new Aaa();
alert(a1.constructor);

关于instanceof

// instanceof:对象与构造函数在原型链上是否有关系
function Aaa(){

}
var a1 = new Aaa();
alert(a1 instanceof Aaa);

var arr = [];
alert(arr instanceof Array); //利用instanceof做类型判断

类型判断最好的办法toString()

//toString:把对象转成字符串,系统对象下都是自带的，自己写的都是通过原型链找的
var arr = [];
alert(arr.toString == Object.prototype.toString);//系统对象false

function Aaa(){

}
var a1 = new Aaa();
alert(a1.toString == Object.prototype.toString);//自己写的true


var arr = [];
alert(Object.prototype.toString.call(arr) == '[object Array]');

继承：属性继承用call，方法用拷贝继承

//继承：在原有对象的基础上略作修改得到一个新的对象且不影响原有对象的功能

function CreatePerson(name,sex){ //父类
    this.name = name;
    this.sex = sex;
}
CreatePerson.prototype.showName = function(){
    alert(this.name);
};
var p1 = new CreatePerson('小明','男');
p1.showName();

function CreateStar(name,sex,job){ //子类
    //this实例对象
    CreatePerson.call(this,name,sex);
    this.job = job;
}
CreateStar.prototype = CreatePerson.prototype;
CreateStar.prototype.showJob = function(){}; //p1也会有，影响到父类了

var p2 = new CreateStar('黄晓明','男','演员');
p2.showName();

解决上面继承后影响父类的问题，拷贝继承

var a = {
    'name':'小明'
};
var b = a;
b.name = '小强';
alert(a.name); //小强
// .........................
var a = {
    'name':'小明'
};
var b = {};
for(var attr in a){
    b[attr] = a[attr]; //基本类型的赋值
}
b.name = '小强';
alert(a.name); //小明
// .........................
function extend(obj1,obj2){ //封装一下
    for(var attr in obj2){
        obj1[attr] = obj2[attr];
    }
}
var a = {
    'name':'小明'
};
var b = {};
extend(b,a);
b.name = '小强';
alert(a.name); //小明


function CreatePerson(name,sex){ //父类
    this.name = name;
    this.sex = sex;
}
CreatePerson.prototype.showName = function(){
    alert(this.name);
};
var p1 = new CreatePerson('小明','男');
p1.showName();

function CreateStar(name,sex,job){ //子类
    //this实例对象
    CreatePerson.call(this,name,sex);
    this.job = job;
}
//CreateStar.prototype = CreatePerson.prototype;
extend(CreateStar.prototype,CreatePerson.prototype);
CreateStar.prototype.showJob = function(){}; //p1没有了，不会影响父类了

var p2 = new CreateStar('黄晓明','男','演员');
p2.showName();

继承的拖拽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    #div1,#div2{
        width: 100px;
        height: 100px;
        cursor: pointer;
        position: absolute;
    }
    #div1{
        left: 0;
        background-color: red;
    }
    #div2{
        left: 100px;
        background-color: yellow;
    }
    </style>
</head>
<body>

    <div id="div1"></div>
    <div id="div2"></div>
    <script>

    function Drag(id){
        this.oDiv = document.getElementById(id);
        this.disX = 0;
        this.disY = 0;
    }
    Drag.prototype.init = function(){
        var This = this;
        this.oDiv.onmousedown = function(ev){
            var oEvent = ev || event;
            This.fnDown(oEvent);
            document.onmousemove = function(ev){
                var oEvent = ev || event;
                This.fnMove(oEvent);
            };
            document.onmouseup = function(){
                This.fnUp();
            };
            return false;
        };
    };
    Drag.prototype.fnDown = function(ev){
        this.disX = ev.clientX - this.oDiv.offsetLeft;
        this.disY = ev.clientY - this.oDiv.offsetTop;
    };
    Drag.prototype.fnMove = function(ev){
        var x = ev.clientX - this.disX;
        var y = ev.clientY - this.disY;
        this.oDiv.style.left = x + "px";
        this.oDiv.style.top = y+ "px";
    };
    Drag.prototype.fnUp = function(){
        document.onmousemove = document.onmouseup = null;
    };


    function ChildDrag(id){
        Drag.call(this,id);//属性call
    }

    function extend(obj1,obj2){//方法拷贝继承
        for(var attr in obj2){
            obj1[attr] = obj2[attr];
        }
    }
    extend(ChildDrag.prototype,Drag.prototype);

    ChildDrag.prototype.fnMove = function(ev){
        var x = ev.clientX - this.disX;
        var y = ev.clientY - this.disY;
        if(x < 0){
            x = 0;
        }
        else if(x > document.documentElement.clientWidth - this.oDiv.offsetWidth){
            x = document.documentElement.clientWidth - this.oDiv.offsetWidth;
        }
        if(y < 0){
            y = 0;
        }
        else if(y > document.documentElement.clientHeight - this.oDiv.offsetHeight){
            y = document.documentElement.clientHeight - this.oDiv.offsetHeight;
        }
        this.oDiv.style.left = x + "px";
        this.oDiv.style.top = y+ "px";
    };
    window.onload = function(){
        var d1 = new Drag("div1");
        d1.init();

        var d2 = new ChildDrag("div2");
        d2.init();
    };
    </script>
</body>
</html>

类式继承：利用构造函数继承的方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
    //类式继承：利用构造函数继承的方式
    //原型继承：借助原型来实现对象继承对象

    function Aaa(){ //父类
        this.name = '小明';
    }
    Aaa.prototype.showName = function(){
        alert(this.name);
    };

    function Bbb(){ //子类
        Aaa.call(this); //属性还是需要call办法继承
    }

    //避免属性继承，只继承showName，画画原型链就明白
    var F = function(){}; //解决当Aaa中得属性为对象时的问题即避免属性继承
    F.prototype = Aaa.prototype;
    Bbb.prototype = new F();
    Bbb.prototype.constructor = Bbb; //修正指向

    var b1 = new Bbb();
    b1.showName();
    </script>
</body>
</html>

原型继承：借助原型来实现对象继承对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
    <script>
    var a = {
        'name':'小明'
    };

    var b = cloneObj(a);
    b.name = '小强';
    alert(b.name);

    function cloneObj(obj){
        var F = function(){};
        F.prototype = obj;
        return new F();
    }
    </script>
</body>
</html>

 

转载于:https://www.cnblogs.com/jiujiaoyangkang/p/5062125.html

weixin_30546933
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript 面向对象编程
gako15587481707的博客
06-18 1227
面向对象编程是一种程序设计思想，它具有 3 个显著的特征：封装、继承、多态。
JS面向对象学习资料
04-06
javascript 面向对象 学习资料
JS 面向对象实现 学习总结
weixin_40529664的博客
04-07 245
1.js是完全的面向对象语言，其中类的创建格式如下： var person = { name:“zhanghow”, sex:“boy”, eat:function(food){ console.log(“I’m eatting”,food) } } //注意的是字段的赋值是冒号取代=与Lua表的区别 字段的访问：1.person.name 2.person[“name”] 字段的添加直接类名.新...
人人都能看懂的JS学习笔记——JS面向对象程序设计（一）
甜妹的博客
11-17 3622
【理解面向对象编程】 首先，当你学习过面向对象编程时，别人一定会告诉你：“一切皆对象”。 “一切皆对象到底是什么意思？” 野生编程君的理解：对象的意思是具体的每个人，程序中一些的代码片段可以变成一个具体的人。这就是我对一切皆对象的解释。 那么，怎么样编写才能让一段代码创造出一个具体的人呢？这个过程就是面向对象程序设计的思路。 【大家总说：封装、继承、多态】 学习的时候，大家总说，面向对
js面向对象理解
weixin_30508309的博客
07-26 1621
js面向对象理解 ECMAScript 有两种开发模式：1.函数式(过程化)，2.面向对象(OOP)。面向对象的语言有一个标志，那就是类的概念，而通过类可以创建任意多个具有相同属性和方法的对象。但是，ECMAScript 没有类的概念，因此它的对象也与基于类的语言中的对象有所不同。 js（如果没有作特殊说明，本文中的js仅包含ES5以内的内容）本身是没有class类型的，但是每个函数都有一个pr...
JavaScript 面向对象详解
qq_36081714的博客
08-09 3565
JavaScript面向对象
javascript面向对象学习笔记(五)——模块化
qianqiuqianqiu的博客
07-18 668
javascript面向对象学习笔记——模块化 javascript没有块级作用域的概念，因此在块语句中定义的变量实际上是包含在函数中而非语句创建的。function outputNumber（count）{ for(var i=0;i<count;i++){ alert(i); } //var i;//重新声明变量 alert(i); }由于变量i
js面向对象学习
09-15 851
JavaScript面向对象 十六、为每个对象动态添加属性或方法 功能:返回对象类型原型的引用  prototype的使用  格式:class.prototype 场景： 比如说：A写了一个类，交给B，B在使用时发现A写的类的功能有所欠缺，但是B没有权力改写A的文件，这时该怎么办？ Function Person(name1,age1){ This.
JavaScript 面向对象-学习总结
aurora0_的博客
02-23 453
接触前端也有一段时间了，作为一个IT小白，从现在开始对前端有了一些的了解。每天跟一些伙伴们在一起学习，是一段令人怀念的时光，下面是我讲述在面向对象学习的过程所学到的东西。 一、什么是面向对象 面向对象是一种解决问题的思路，是一种编程思想。生活中，你想吃每位的披萨，你需要 1）线制作一个饼底 2）放上各种爱吃的肉类、蔬菜、果粒 3）撒上各种马苏、芝士、沙拉 4）还需要一个烤箱 5）最后静静的等待45...
JavaScript面向对象学习总结(1.0)
MR_LY666的博客
08-15 321
前言 学习JS一段时间,今天把学习的一些内容总结了一下,发表于此 面向对象 面向过程:面向过程就是分析解决问题的步骤,一步一步的解决问题 面向对象:面向对象就是把问题分解成个个对象,通过对象来解决问题,而我们只需要发出指令就可以 面向对象的实现方式主流一般有两种实现方式 基于类的面向对象 基于原型的面向对象 JS是基于原型的面向对象面向对象的三大特征 封装也就是把客观事物封装成抽象的类或具体的对
javascript面向对象学习笔记
10-20
javascript面向对象学习笔记，包含类、对象、实现继承
学习javascript面向对象 实例讲解面向对象选项卡
10-23
主要介绍了面向对象选项卡实现方法，帮助大家更好地学习javascript面向对象，感兴趣的小伙伴们可以参考一下
学习javascript面向对象 理解javascript对象
10-23
主要介绍了javascript对象，学习javascript面向对象，感兴趣的小伙伴们可以参考一下
王博外文文献.pdf
最新发布
05-23
王博外文文献.pdf
基于 Go+Echo 开发的多房间实时通讯系统。.zip
05-23
Go语言（也称为Golang）是由Google开发的一种静态强类型、编译型的编程语言。它旨在成为一门简单、高效、安全和并发的编程语言，特别适用于构建高性能的服务器和分布式系统。以下是Go语言的一些主要特点和优势： 简洁性：Go语言的语法简单直观，易于学习和使用。它避免了复杂的语法特性，如继承、重载等，转而采用组合和接口来实现代码的复用和扩展。 高性能：Go语言具有出色的性能，可以媲美C和C++。它使用静态类型系统和编译型语言的优势，能够生成高效的机器码。 并发性：Go语言内置了对并发的支持，通过轻量级的goroutine和channel机制，可以轻松实现并发编程。这使得Go语言在构建高性能的服务器和分布式系统时具有天然的优势。 安全性：Go语言具有强大的类型系统和内存管理机制，能够减少运行时错误和内存泄漏等问题。它还支持编译时检查，可以在编译阶段就发现潜在的问题。 标准库：Go语言的标准库非常丰富，包含了大量的实用功能和工具，如网络编程、文件操作、加密解密等。这使得开发者可以更加专注于业务逻辑的实现，而无需花费太多时间在底层功能的实现上。 跨平台：Go语言支持多种操作系统和平台，包括Windows、Linux、macOS等。它使用统一的构建系统（如Go Modules），可以轻松地跨平台编译和运行代码。 开源和社区支持：Go语言是开源的，具有庞大的社区支持和丰富的资源。开发者可以通过社区获取帮助、分享经验和学习资料。 总之，Go语言是一种简单、高效、安全、并发的编程语言，特别适用于构建高性能的服务器和分布式系统。如果你正在寻找一种易于学习和使用的编程语言，并且需要处理大量的并发请求和数据，那么Go语言可能是一个不错的选择。
javascript 面向对象pdf
10-23
对于学习JavaScript面向对象编程的人来说，可以查阅一些相关的PDF文档。这些文档可以介绍JavaScript的面向对象特性，如何创建对象、定义属性和方法，以及如何实现继承和多态性等。通过阅读这些PDF文档，可以帮助学习...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值