博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
DOM--2 创建可重用的对象
阅读量:4341 次
发布时间:2019-06-07

本文共 2087 字,大约阅读时间需要 6 分钟。

对象中包含的

  • 分类(内置对象: 注意这些都是function;除了Function对象,实例都是object)
    • Function对象
      • Function实例function
      • 构造函数的function
    • Object对象
      • Object实例
    • 其他
      • 其他实例
  • 理解对象成员
    • 函数是为避免冗余代码而构建的一种简单的可重用的容器
    • 当对象被传递到期望一个字符串参数值的alert()函数中,Object对象的toString()方法就会被调用;
    • DOM与别的对象一样,其各种对象和方法都是由Object对象和Function对象构成的;

创建自己的对象

Array对象和Object对象是一样的,只不过Array扩展自Object,并且添加来额外的属性和方法;其他对象也是一样(除了Function)

  • 使用构造函数
function myConstructor(message) {  //公有属性  this.myMessage = message;  //公有方法  this.method = function() {    alert(this.myMessage);  };  //私有属性  var separator = '-';  var myOwner = this;  //私有方法  function alertMessage() {    alert(myOwner.myMessage);  };    alertMessage();  //私有方法只能在实例化的时候调用  //特权方法(也是公有方法)  this.appendToMessage = function(string) {    this.myMessage += separator + string;    alertMessage();  };}//也是公有方法myConstructor.prototype.clearMessage = function() {  this.myMessage = '';}//静态属性myConstructor.user = 'jefff';//静态方法myConstructor.alertName = function() {  alert(this.user);}

浏览器中的解释程序在执行js代码之前,首先要对代码进行变量初始化,即初始化window对象之下的所有顶级变量;使用赋值语句实现的函数在初始化过程中不会立即声明,只有在解释器开始执行代码并执行到相应的赋值语句时,该函数才会被声明;函数定义实现的函数则在初始化的时候就被声明

关于this

特别注意在监听事件的执行方法中,this指代监听的元素

  • 重定义执行环境
function bindFunction(obj, func) {    return function() {      func.apply(obj, arguments);    }  }

例子

function doubleCheck() {    this.message = 'Are you sure you want to leave?';  }  doubleCheck.prototype.sayGoodbye = function() {    //实际上执行的时候这里查找的this指代元素    return confirm(this.message);  }  function initPage() {    var clickedLink = new doubleCheck();    var links = A.getByTag('a');    for(var i = 0, len = links.length; i < len; i++) {      A.addEvent(links[i], 'click', clickedLink.sayGoodbye);    }  }  A.addEvent(window, 'load', initPage);

常用解决方法

function bindFunction(obj, func) {    return function() {      func.apply(obj, arguments);    }  }

上面代码关键在于,bindFunction返回的匿名函数使用来内部作用域中的arguments参数,作为外部作用域中的obj和func调用apply()时传递的额外参数

使用

A.addEvent(links[i], 'click', bindFunction(clickedLink, clickedLink.sayGoodbye));

更加简单的方法

A.addEvent(links[i], 'click', clickedLink.sayGoodbye.bind(clickedLink));

转载于:https://www.cnblogs.com/jinkspeng/p/4260850.html

你可能感兴趣的文章
微信支付之异步通知签名错误
查看>>
2016 - 1 -17 GCD学习总结
查看>>
linux安装php-redis扩展(转)
查看>>
Vue集成微信开发趟坑:公众号以及JSSDK相关
查看>>
技术分析淘宝的超卖宝贝
查看>>
i++和++1
查看>>
react.js
查看>>
P1313 计算系数
查看>>
NSString的长度比较方法(一)
查看>>
Azure云服务托管恶意软件
查看>>
My安卓知识6--关于把项目从androidstudio工程转成eclipse工程并导成jar包
查看>>
旧的起点(开园说明)
查看>>
生产订单“生产线别”带入生产入库单
查看>>
crontab导致磁盘空间满问题的解决
查看>>
java基础 第十一章(多态、抽象类、接口、包装类、String)
查看>>
Hadoop 服务器配置的副本数量 管不了客户端
查看>>
欧建新之死
查看>>
自定义滚动条
查看>>
APP开发手记01(app与web的困惑)
查看>>
笛卡尔遗传规划Cartesian Genetic Programming (CGP)简单理解(1)
查看>>