什么是JS面向对象?

最新推荐文章于 2022-10-16 07:00:00 发布

JaceLai_

最新推荐文章于 2022-10-16 07:00:00 发布

阅读量652

点赞数

分类专栏： web前端笔记文章标签： string 对象面向对象

本文链接：https://blog.csdn.net/Wlcf258/article/details/71225208

版权

web前端笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1. js的几种数据类型：

   number, string, boolean, object, undefined五种数据类型

2. js的常见内置对象类：

     Date, Array, Math,Number,Boolean, String, RegExp, Function,Object。

3. js的两个类型判断方法：

        typeof、instanceof

4.什么是面向对象和面向对象的特性：

    面向对象可以把程序中的关键模块都视为对象，而模块拥有属性及方法。
    工厂模式：就是在函数内创建一个对象，给对象赋予属性及方法再将对象返回即可。
    构造函数模式：ECMAscript中构造函数可以创建特定类型的对象，类似于Array、Date等原生JS的对象。
    原型模式：就是可以让所有对象实例共享它所包含的属性及方法。
 特性：
     抽象：抓住核心问题，把客观事物封装成抽象的类
     封装：不考虑内部实现，只考虑功能使用
     继承：从已有对象上，继承出新的对象，让某个类型的对象获得另一个类型的对象属性的方法。

抽象：

<script>
var a=12;       //变量：自由的，不属于任何人
alert(a);
var arr=[1,2,3,4,5,6];
arr.a=12;       //属性：属于一个对象的
alert(arr.a);
</script>

<script>
function aaa()          //函数：自由
{
    alert('abc');
}
var arr=[1,2,3,4];
arr.aaa=function ()     //方法：属于一个对象
{
    alert('abc');
};
aaa();
arr.aaa();
</script>

继承实例：

<script type="text/javascript">
            window.onload=function(){
          //            原型继承
                var a={
                    name:'张三'
                }
                var b=clone(a)
                b.name='李四';
                function clone(obj){
                    var f=function(){};
                    f.prototype=obj
                    return new f();
                }
                alert(b.name);              
            }
        </script>

5.object构造函数、

<script type="text/javascript">
    window.onload=function(){
           function Creatshouw(nam,se){
                    var obj=new Object();
                    obj.name=nam;
                    obj.sex=se;
                    obj.showname=function(){
                        alert(obj.name);
                    }
                    obj.showsex=function(){
                        alert(obj.showsex);
                    }
                    return obj;
                }
                // Creatshouw:类，obj1：对象
                var obj1=Creatshouw('张三','男')
                 alert(obj1.sex)
            }
        </script>

6.包装对象

<script type="text/javascript">
            var str='hello';        
            //alert(str.charAt(0));//找到下标为0的字符串片段
            //alert(str.indexOf('e'));//找到e第一次出现的下标         
            //alert(typeof str);            
            //null undefined Number Boolean String
            //包装对象：基本类型都有自己的包装对象：Number Boolean String          
            var str2=new String('hello');          
            //基本类型会自动找到对应的包装对象类型，然后包装对象把所有的属性和方法给基本类型，然后包装对象就消失
            var srr='hello';
            String.prototype.lasevalue=function(){ //给字符串的包装对象添加一个方法
                return this[this.length-1];
            }
            //alert(srr.lasevalue());       
            srr.num=10;     
            alert(srr.num);//undefined  :           
        </script>

7.继承的拖拽，利用继承类的方式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            //类：js是没有类的概念的，我们通常把构造函数当做类来用

            //类式继承：虽然简单，但是有很多坑，所以用的时候最好还是属性和方法分开继承。

            //属性：用call方式
            //方法：借助中间构造函数f实现继承

            function aa(){//父类
                this.name=[1,2,3];
            }
            aa.prototype.showname=function(){
                alert(this.name);
            }

            function bb(){ //子类
                aa.call(this);
            }
            //var a1=new aa();
//          bb.prototype=new aa();//用什么方法能够实现一句话进行对象的拷贝：类式继承

            var f=function(){};
            f.prototype=aa.prototype;
            bb.prototype=new f();
            bb.prototype.constructor=bb;//修正构造函数指向

            var b1=new bb();
            //alert(b1.name);
            //b1.showname();
            b1.name.push(4,5,6);
            //alert(b1.name);//123456
            alert(b1.constructor);

            var b2=new bb();
            //alert(b2.name); //123456:证明这种方式是引用，会相互影响

        </script>
    </head>
    <body>
    </body>
</html>

8.面向对象组件的开发：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #div1 {
                width: 100px;
                height: 100px;
                background: red;
                position: absolute;
            }

            #div2 {
                width: 100px;
                height: 100px;
                background: yellow;
                position: absolute;
                left: 100px;
            }

            #div3 {
                width: 100px;
                height: 100px;
                background: blue;
                position: absolute;
                left: 200px;
            }

            #div4 {
                width: 100px;
                height: 100px;
                background: green;
                position: absolute;
                left: 300px;
            }
        </style>
        <script type="text/javascript">
            window.onload = function() {
                //第一个盒子：只能拖拽
                var d1 = new Drag();
                d1.init({    //配置参数
                    id: 'div1'
                });
                //第二个盒子：按下的时候title变成hello
                var d2 = new Drag();
                d2.init({ //配置参数
                    id: 'div2',
                    todown: function() {
                        document.title = 'hello';
                    }
                });
                //第三个盒子：按下title变成：面向，up的时候title：对象
                var d3 = new Drag();
                d3.init({ //配置参数
                    id: 'div3',
                    todown: function() {
                        document.title = '面向';
                    },
                    toup: function() {
                        document.title = '对象';
                    }
                });
                //第四个盒子：up的时候title变成：ok
                var d4 = new Drag();
                d4.init({ //配置参数
                    id: 'div4',
                    toup: function() {
                        document.title = 'ok';
                    }
                });
            }
            //遇到两个问题：如果参数没有写完整，会报错；如果参数写少了，顺序不对
            function Drag() { //构造函数
                this.obj = null;
                this.disx = 0;
                this.disy = 0;
            }
            Drag.prototype.init = function(opt) {
                var _this = this;
                this.obj = document.getElementById(opt.id);

                this.setting={ //默认参数
                    todown:function(){},
                    toup:function(){}
                }

                extend(this.setting,opt);

                this.obj.onmousedown = function(ev) {
                    var ev = ev || event;
                    _this.fndown(ev);
                    _this.setting.todown();
                    document.onmousemove = function(ev) {
                        var ev = ev || event;
                        _this.fnmove(ev);
                    }
                    document.onmouseup = function() {
                        _this.fnup();
                        _this.setting.toup();
                    }
                }
            }
            Drag.prototype.fndown = function(ev) {
                this.disx = ev.clientX - this.obj.offsetLeft;
                this.disy = ev.clientY - this.obj.offsetTop;
            }
            Drag.prototype.fnmove = function(ev) {
                this.obj.style.left = ev.clientX - this.disx + 'px';
                this.obj.style.top = ev.clientY - this.disy + 'px';
            }
            Drag.prototype.fnup = function() {
                document.onmousemove = document.onmouseup = null;
            }

            function extend(obj1,obj2){
                for(var i in obj2){
                    obj1[i]=obj2[i];
                }
            }
        </script>
    </head>
    <body>
        <div id="div1"></div>
        <div id="div2"></div>
        <div id="div3"></div>
        <div id="div4"></div>
    </body>
</html>