澳门新莆京手机网站-新蒲京娱乐场 > 计算机 > js拖拽的原型表明和用法总计,js拖拽原型注脚

js拖拽的原型表明和用法总计,js拖拽原型注脚

下边是协和写的四个关于js的拖拽的原型注脚:代码如下

js拖拽的原型申明和用法计算,js拖拽原型申明

上边是自个儿写的三个关于js的拖拽的原型证明:代码如下

内需在意的主题材料富含:

1.this的针对到底是指向哪个人--弄清楚所指的目的

2.call(State of Qatar方法的接纳

3.平昔将父级原型赋给子级与运用for将其赋给子级有何样分别?

比如:

for(var i in Drag.prototype)
{
  LimitDrag.prototype[i]=Drag.prototype[i];----------子级发生改变,其父级并不会受到影响
}

 LimitDrag.prototype=Drag.prototype;---------直接将原型赋给子级,会导致当子级发生改变时,其父级也会随之而改变。

代码如下

<html>
<head>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute;}
#div2 {width:100px; height:100px; background:yellow; position:absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>拖拽--面向对象</title>
<script>
window.onload=function()
{
  new Drag('div1');
  new LimitDrag('div2');
}
function Drag(id)
{
   var _this=this;//这个this表示p1
   this.disx=0;
   this.disy=0;
   this.oDiv=document.getElementById(id);
   this.oDiv.onmousedown=function(ev){//按下的时候有个事件,传递给下面的事件
    _this.fnDown(ev);
    return false;
   }
}; 
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 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;
};
//继承Drag的所有属性
function LimitDrag(id)
{
    Drag.call(this,id);//这个this指LimitDrag new的对象
}
//得到Drag的方法,遍历其原型
for(var i in Drag.prototype)
{
  LimitDrag.prototype[i]=Drag.prototype[i];
}
//改变Drag的fnMove的方法
LimitDrag.prototype.fnMove=function(ev)
{
  var oEvent=ev||event;
  var l=oEvent.clientX-this.disx;
  var t=oEvent.clientY-this.disy;
  if(l>document.documentElement.clientWidth-this.oDiv.offsetWidth)
  {
    l=document.documentElement.clientWidth-this.oDiv.offsetWidth;
  }
  else if(l<0)
  {
    l=0;
  }
   if(t>document.documentElement.clientHeight-this.oDiv.offsetHeight)
  {
    t=document.documentElement.clientHeight-this.oDiv.offsetHeight;
  }
  else if(t<0)
  {
    t=0;
  }
   this.oDiv.style.left=l+'px';
   this.oDiv.style.top=t+'px';
}
</script>
</head>
<body>
<div id="div1">
</div>
<div id="div2">
</div>
</body>
</html>

上述正是本文的全部内容,希望对我们的求学抱有助于。

图片 1原型基本落实

率先步:学会创设对象

  • 厂子形式
function Dog(name, variety) {
    return {
        name: name,
        variety: variety
    };
}
var dog1 = Dog('二牛', '牛头梗');
var dog2 = Dog('二狗', '哈士奇');
  • 布局函数方式
function Dog(name, variety) {
    this.name = name;
    this.variety = variety;
}
var dog1 = new Dog('二牛', '牛头梗');
var dog2 = new Dog('二狗', '哈士奇');
console.log(dog1.name); // 二牛
console.log(dog2.name); // 二狗

与上三个相对来说未有return语句,直接将品质和方式赋给了this对象
问题:每一种方法都要在各类实例上再一次成立二回,所以每二个实例所满含的同名函数是不等于的,如下所示:

print(dog1.bark() === dog2.bark()); // false
  • 原型方式
function Dog(name, variety) {
    this.name = name;
    this.variety = variety;
}
Dog.prototype.type = '犬科';
Dog.prototype.bark = function() {
    console.log('汪汪汪');
}
var dog1 = new Dog('二牛', '牛头梗');
var dog2 = new Dog('二狗', '哈士奇');
console.log(dog1.type); // 犬科
dog1.bark(); // 汪汪汪
print(dog2.type); // 犬科
dog2.bark(); // 汪汪汪

console.log(dog1.bark() === dog2.bark()); // true

Dog 构造函数皆有二个prototype脾气,指向函数原型对象Dog prototypeDog prototype里面有三个constructor属性,指向Dog,实例dog1,dog2指向Dog prototype,实例之中含有二个指南针[[prototype]]代表针对构造函数的原型对象

图片 2

1.this的照准到底是指向什么人--弄清楚所指的指标

你或者感兴趣的篇章:

  • javascript援助firefox,ie7页面结构拖拽效果代码
  • Javascript拖拽类别文章2之offsetLeft、offsetTop、offsetWidth、offsetHeight属性
  • JQuery Dialog(JS 模态窗口,可拖拽的DIV卡塔尔(قطر‎
  • 至于js拖拽上传 [三个拖拽上传校订头像的流水生产线]
  • js原型链原理看图表达
  • div拖拽插件——JQ.MoveBox.js(自制JQ插件卡塔尔(قطر‎
  • javascript拖拽上传类库DropzoneJS使用方法
  • js完美的div拖拽实例代码
  • 鼠标拖拽移动子窗体的JS实现
  • JS面向对象底子讲授(工厂方式、布局函数方式、原型形式、混合形式、动态原型形式State of Qatar

下边是友好写的叁个有关js的拖拽的原型评释:代码如下 需求当心的难点归纳: 1.this的指向到...

ECMAScript中呈报了原型链的概念,并将原型链作为落成三回九转的根本措施。其主导观念是行使原型让四个引用类型世襲另叁个援引类型的属性和方法。轻便回看一下布局函数、原型和实例的关系:种种布局函数都有七个原型对象,原型对象都含有一个针对构造函数的指针,而实例都饱含多个对准原型对象的个中指针。那么,要是大家让原型对象等于另两个品种的实例,结果会怎么着啊?分明,那时的原型对象将蕴含三个指向性另一个原型的指针,相应地,另一个原型中也隐含着八个针对另八个布局函数的指针。借使另五个原型又是另五个类型的实例,那么上述提到依然创造,如此罕有推动,就结成了实例与原型的链条。那正是所谓原型链的基本概念。

原型链的变异

  • 布局函数,原型,实例之间的关系:
    种种布局函数都有三个原型对象,原型对象包涵三个针对性布局函数的指针,而实例由 new 贰个布局函数而生成,富含贰个针对原型对象的指针。

图片 3

  • 原型链
    让原型对象的指向为另八个系列的实例,在下图旅长SubType的原型对象 SubType Prototype指向了SuperType Prototype结合原型链

图片 4

2.call(卡塔尔国方法的行使

function SuperType(){ this.property = true;}SuperType.prototype.getSuperValue = function(){ return this.property;};function SubType(){ this.subproperty = false;}//继承了SuperTypeSubType.prototype = new SuperType();SubType.prototype.getSubValue = function (){ return this.subproperty;};var instance = new SubType();console.log(instance.getSuperValue; //true

继承

要害信任原型链来完结接二连三

  • 原型继承
function Animal() {
    this.feeling = 'happy';
}
function Dog(name, variety) {
    this.name = name;
    this.variety = variety;
}
Dog.prototype = new Animal();
Dog.prototype.constructor = Dog;
var dog = new Dog('二狗', '哈士奇');
console.log(dog.feeling); // happy

问题:实例对象分享

function Animal() {
    this.colors = ['red', 'green', 'blue'];
}
function Dog() {
}
// 继承Animal
Dog.prototype = new Animal();
Dog.prototype.constructor = Dog;
var dog1 = new Dog();
dog1.colors.push('black');
console.log(dog1.colors); // red,green,blue,black
var dog2 = new Dog();
console.log(dog2.colors); // red,green,blue,black
  • 布局函数世襲
function Animal() {
    this.feeling = 'happy';
}
function Dog(name, variety) {
    Animal.apply(this, arguments);
    this.name = name;
    this.variety = variety;
}
var dog = new Dog('二狗', '哈士奇');
console.log(dog.feeling); // happy

接纳apply大概call方法退换构造函数作用域,将父函数的布局函数绑定到子对象上
问题:措施都在布局函数中定义,函数的复用一纸空文

  • 布局函数+原型继承
function Animal(name) {
    this.name = name;
    this.colors = ['red', 'green', 'blue'];
}
Animal.prototype.sayName = function() {
    console.log(this.name);
};
function Dog(name, age) {
    // 继承属性
    Animal.call(this, name);
    this.age = age;
}
// 继承方法
Dog.prototype = new Animal();
Dog.prototype.sayAge = function() {
    console.log(this.age);
}
//实例一
var dog1 = new Dog('二狗', 1);
dog1.colors.push('black');
console.log(dog1.colors); // red,green,blue,black
dog1.sayName(); // 二狗
dog1.sayAge(); // 1
//实例二
var dog2 = new Dog('二牛', 2);
console.log(dog2.colors); // red,green,blue
dog2.sayName(); // 二牛
dog2.sayAge(); // 2

参考:http://www.alloyteam.com/2015/06/javascript-shu-ju-jie-gou-he-suan-fa-jian-shu-qian-yan/

3.直接将父级原型赋给子级与使用for将其赋给子级有怎么样分别?

上述代码定义了八个品类:SuperType和SubType。每一个项目分别有壹天质量和一个办法。它们的关键区别是SubType世襲了SuperType,而一而再是通过创制SuperType的实例,并将该实例赋给SubType.prototype完毕的。完毕的庐山面目目是重写原型对象,代之以一个新品类的实例。换句话说,原本存在于SuperType的实例中的全部属性和方法,未来也存在于SubType.prototype中了。在创制了一而再关系随后,我们给SubType.prototype加多了三个主意,那样就在世襲了SuperType的属性和措施的根基上又增加了三个新形式。那些事例中的实例以致构造函数和原型之间的关联如图

for(var i in Drag.prototype){ LimitDrag.prototype[i]=Drag.prototype[i];----------子级发生改变,其父级并不会受到影响} LimitDrag.prototype=Drag.prototype;---------直接将原型赋给子级,会导致当子级发生改变时,其父级也会随之而改变。

#div1 {width:100px; height:100px; background:red; position:absolute;}#div2 {width:100px; height:100px; background:yellow; position:absolute;}拖拽--面向对象window.onload=function; new LimitDrag;}function Drag{ var _this=this;//&#36825;&#20010;this&#34920;&#31034;p1 this.disx=0; this.disy=0; this.oDiv=document.getElementById; this.oDiv.onmousedown=function{//&#25353;&#19979;&#30340;&#26102;&#20505;&#26377;&#20010;&#20107;&#20214;&#65292;&#20256;&#36882;&#32473;&#19979;&#38754;&#30340;&#20107;&#20214; _this.fnDown; return false; }}; Drag.prototype.fnDown=function{ var _this=this; var oEvent=ev||event; this.disx=oEvent.clientX-this.oDiv.offsetLeft; this.disy=oEvent.clientY-this.oDiv.offsetTop; document.onmousemove=function{//&#31227;&#21160;&#30340;&#26102;&#20505;&#26377;&#20010;&#20107;&#20214; _this.fnMove; } document.onmouseup=function; }}; Drag.prototype.fnMove=function{ 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;};//&#32487;&#25215;Drag&#30340;&#25152;&#26377;&#23646;&#24615;function LimitDrag{ Drag.call;//&#36825;&#20010;this&#25351;LimitDrag new&#30340;&#23545;&#35937;}//&#24471;&#21040;Drag&#30340;&#26041;&#27861;,&#36941;&#21382;&#20854;&#21407;&#22411;for(var i in Drag.prototype){ LimitDrag.prototype[i]=Drag.prototype[i];}//&#25913;&#21464;Drag&#30340;fnMove&#30340;&#26041;&#27861;LimitDrag.prototype.fnMove=function{ var oEvent=ev||event; var l=oEvent.clientX-this.disx; var t=oEvent.clientY-this.disy; if(l&gt;document.documentElement.clientWidth-this.oDiv.offsetWidth) { l=document.documentElement.clientWidth-this.oDiv.offsetWidth; } else if { l=0; } if(t&gt;document.documentElement.clientHeight-this.oDiv.offsetHeight) { t=document.documentElement.clientHeight-this.oDiv.offsetHeight; } else if { t=0; } this.oDiv.style.left=l+'px'; this.oDiv.style.top=t+'px';}

图片 5骨干原型链

上一篇:没有了 下一篇:怎么着运用bootstrap栅格系统?

Copyright © 2015-2019 http://www.carrefourstation.com. 澳门新莆京手机网站-新蒲京娱乐场有限公司 版权所有