分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 技术分享

js面向对象实例

发布时间:2023-09-06 02:34责任编辑:白小东关键词:js面向对象

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

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

call函数

function show(){ ???alert(this);}show();//windowshow().call();//和上面的一样也是弹出window call()其实就是调用函数 但又和普通的函数调用有区别show().call(12);//alert 12而不是‘this‘(window) 即call可以改变函数执行时的thisfunction show(a,b){ ???alert(‘this是:‘+this+‘\na是:‘+a+‘\nb是:‘+b);}show(12,5);//弹出window 12 5show.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);}//继承Afunction 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);//12obj.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面向对象实例

原文地址:https://www.cnblogs.com/yundong333/p/10469489.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved