js面向对象实例

Posted 2021-02-14 像走了一光年

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js面向对象实例相关的知识，希望对你有一定的参考价值。

JSON方式来编写对象
简单不适合多个对象

var json={a:12,
show:function (){
alert(this);
}
};
json.show(); //理所当然弹出的是object(this指的是json)

call函数

function show(){
    alert(this);
}
show();//window
show().call();//和上面的一样也是弹出window call()其实就是调用函数 但又和普通的函数调用有区别
show().call(12);//alert 12而不是‘this‘(window) 即call可以改变函数执行时的this

function show(a,b){
    alert(‘this是：‘+this+‘
a是:‘+a+‘
b是:‘+b);
}
show(12,5);//弹出window 12 5
show.call(‘abc‘,12,5);//只需把第一个参数变成this 后面的还是实参给形参

var arr1=[1,2,3];
var arr2=arr1;//这样也是引用  而不是单单的复制
//改变方法:
var arr3=[];
for(var i=0;i<arr.length;i++){
     arr3.push(arr1[i]);
}
arr3.push(4);

对象由属性(变量)和方法(函数)构成

<script>
function A(){
     this.abc=12;
}
A.prototype.show=function (){
      alert(this.abc);
}
//继承A
function B(){
    //这个this 是指的new B()  这是处在形参位置上的哇
    A.call(this);
    //call()其实就是调用函数 但又和普通的函数调用有区别即call可以改变函数执行时的this
    //通过call来继承属性
}
B.prototype=A.prototype;//继承"方法"  原型这个也是引用！(c语言里的值传递啊引用传递啊) (下面改正)
B.prototype.fn=function (){
    alert(‘abc‘);
}

var objB=new B();
var objA=new A();
alert(obj.abc);//12
obj.show();
objA.fn();//弹出了对象 按理来说A是没有这个方法的 但是call()这个是引用传递
</script>
//改正方法:
     for(var i in A.prototype){
         B.prototype[i]=A.prototype[i];
     }

拖拽面向对象形式

<!DOCTYPE html>
<html>
<head>
<meta  charset="utf-8">
<title>diyici</title>
<style>
#div1{ width:200px; height:200px; background:yellow; position:absolute;}
</style>
<script>
window.onload=function(){
    new Drag(‘div1‘);
}

function Drag(id){
    var _this=this;
    this.disX=0;
    this.disY=0;

    this.oDiv=document.getElementById(id);
    this.oDiv.onmousedown=function (ev){
            _this.fnDown(ev);
    }

}
Drag.prototype.fnDown=function (ev){
        var _this=this;
        var oEvent=ev||event;

         this.disX=oEvent.clientX-this.oDiv.offsetLeft;
         this.disY=oEvent.clientY-this.oDiv.offsetTop;

        document.onmousemove=function (ev){
             _this.fnMove(ev);
        }
        document.onmouseup=function (){
            _this.fnUp();
        }
}
Drag.prototype.fnMove=function (ev){
        var _this=this;
        var oEvent=ev||event;
        this.oDiv.style.left=oEvent.clientX-this.disX+‘px‘;
        this.oDiv.style.top=oEvent.clientY-this.disY+‘px‘;
}
Drag.prototype.fnUp=function (){
        document.onmousemove=null;
        document.onmouseup=null;
}
</script>
</head>
<body>
        
<div id="div1"></div>

</body>
</html>

以上是关于js面向对象实例的主要内容，如果未能解决你的问题，请参考以下文章

纯JS制作选项卡--JavaScript实例集锦（初学）

js面向对象

js面向对象实例

JS面向对象篇什么是原型？原型对象与实例对象构造函数的关系及相关方法

一二面_面向对象

JS面向对象