javascript学习5——javascript面向对象（下）

最新推荐文章于 2022-06-01 13:05:27 发布
最新推荐文章于 2022-06-01 13:05:27 发布
阅读量781 收藏 1
点赞数 2
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yjjm1990/article/details/8629006
版权

对象字面量

这里介绍一种对象字面量作为另一种语法则更清晰便于阅读：

 

this

通过下面的例子，可以加深我们的理解。

<script type="text/javascript">
	function myFun(){
			this.style.color='red';
		}      
</script>
</head>
 
<body>
	<a href="#" id="a">测试用的链接</a>
    
    <!--把脚本放到这里是因为要先加载a标签，要不然会出错。-->
    <script type="text/javascript">
		<!--这种情况下，this表示执行这个myFun的实例，也就是这个a标签-->
		document.getElementById('a').οnclick=myFun;
		
		<!--如果这样写的话，会报错，因为相当于是把windows.myFun的执行结果赋给a标签的onclick，因为-->
		/*window没有style会报错。*/
		/*document.getElementById('a').οnclick=myFun();*/
	</script>
</body>


 

      我们再来看一个例子

我在前面的博客中有提到建立自己的JS库，下面我们在自己的JS库里添加一个方法，如下：

// JavaScript Document

(function(){
	
	window['LS']={};
	function $()
	{
		var elements=new Array();		
		for(var i=0;i<arguments.length;i++)
		{
			 var element=arguments[i];
			 
			 if(typeof(element)=='string')
				{
					element=document.getElementById(element);
					}	
					
			 if(arguments.length==1)
			 {
				 return element;
				 }
			
			 elements.push(element);
		}
		return elements;	
	};
	window['LS']['$']=$;
	
	function getElementsByClassName(className,tag)
	{
		var allTags=document.getElementsByTagName(tag);
		var matchingElements=new Array();
		
		className=className.replace(/\-/g,"\\-");
		var regex=new RegExp("(^|\\s)"+className+"(\\s|$)");
		
		var element;
		for(var i=0;i<allTags.length;i++)
		{
			element=allTags[i];
			if(regex.test(element.className))
			{
				matchingElements.push(element);
				}
			}
			return matchingElements;
		}
		window['LS']['getElementsByClassName']=getElementsByClassName;
	
	//向某一对象上添加事件。
	function addEvent(node,type,listener)
	{
		if(!(node=$(node))) return false;
		
		if(node.addEventListener)
		{
			node.addEventListener(type,listener,false);
			return true;
			}
		else if(node.attachEvent)
		{
			node['e'+type+listener]=listener;
			node[type+listener]=function(){node['e'+type+listener](window.event);};
			node.attachEvent('on'+type,node[type+listener]);
			return true;
			}
		return false;
	}
	window['LS']['addEvent']=addEvent;
	})();


       我们再建立一个JS文件，用来进行测试：

function doubleClick()
{
	this.message='这是期望看到的内容。';
	}
doubleClick.prototype.sayGoodBye=function(){
		return confirm(this.message);
	}
function initPage()
{
	var clickLink=new doubleClick();
	var links=document.getElementsByTagName('a');
	for(var i=0;i<links.length;i++)
	{
		LS.addEvent(links[i],'click',clickLink.sayGoodBye);
	//	我认为上面那句话就相当于下面这句话。
	//	links[i].οnclick=clickLink.sayGoodBye;
		}
	}
LS.addEvent(window,'load',initPage);


        建立测试页面如下：

<title>无标题文档</title>

<!--这两个也是有顺序的哦-->
<script type="text/javascript" src="LS.js"></script>
<script type="text/javascript" src="context.js"></script>
</head>
	<a href="#">测试用的链接1</a>
    <a href="#">测试用的链接2</a>
    <a href="#">测试用的链接3</a>
<body>
	
</body>


         我们本来是想当单击超链接的时候，弹出一个confirm，可是结果是：这样的：

我们通过firefox的firebug来看一下：

this不是我们想要的，这里的this是a标签。

那么我们要怎么才能让this指向doubleClick对象呢？看下面。

call()和apply()方法

 

          所以，我们修改代码如下：

//外面一定要再用funciton(){}围起来，因为clickLink.sayGoodBye.call相当于一个方法
		LS.addEvent(links[i],'click',function(){clickLink.sayGoodBye.call(clickLink)});


              当然我们也可以在我们JS库里添加一个方法：如下：

function bindFunction(obj,func)
	{
		return function()
		{
			func.apply(obj,arguments);
			}
		}
	window['LS']['bindFunction']=bindFunction;


              方便以后我们进行调用。

         然后调用语句：

LS.addEvent(links[i],'click',LS.bindFunction(clickLink,clickLink.sayGoodBye));


通过firefox调试我们可以看到：

JS的异常处理

yjjm1990
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
学习javascript面向对象 javascript实现继承的方式
11-22
实际上不是SubType的原型的constructor属性被重写了，而是SubType的原型指向了另一个对象——SuperType的原型，而这个原型对象的construtor属性指向的是SuperType function SuperType(){ this.property = true; }...
JavaScript 学习笔记——内部对象/面向对象编程
weixin_49001740的博客
03-08 1333
JavaScript 快速入门 学习笔记 五、内部对象 六、面向对象编程
JavaScript 高级——详谈面向对象
热门推荐
官方推荐
10-26 3万+
1.面向过程与面向对象 1.1面向过程 面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。 1.2面向对象 面向对象是把事务分解成为一个个对象，然后由对象之间分工与合作。 1.3面向过程与面向对象对比 面向过程 面向对象 优点 性能比面向对象高，适合跟硬件联系很紧密的东西，例如单片机就采用的面向过程编程。 易维护、易复用、易扩展，由于面向对象有封装、继承、多态性的特性，可以设计出低耦合的系统，使系统 更加灵活、更加易于
01 知识点回顾——JavaScript的面向对象
X北辰北的博客
02-15 1999
写在前面 这个系列的文章是通过对《JavaScript设计模式》一书的学习后总结而来，刚开始觉得学习的时候只需看书即可，不用再另外记录笔记了，但是后面发现书中有些内容理解起来并不是很容易，所以结合书中的描述就将自己的理解也梳理了一下并将它记录下来，希望和大家一起学习，文章中如果有我理解错的内容，请各位批评指正，大家共同进步~ 目录 写在前面 内容 动态类型语言和鸭子类型 多态 ...
JavaScript面向对象—— 动态创建tab标签页
爱前端的程序媛的博客
05-04 3421
昨天呢，介绍了js中类的概念，以及使用类创建对象的过程。今天就用js中的类实现一个小的功能，动态添加、删除标签页。emmmmm，也有点像tab栏切换，不过比tab栏切换多了添加和删除的功能。 案例说明 js动态实现标签页的创建和删除。这个案例呢，要用类来实现，Tab就是本次案例的类。但在写之前需要来分析并抽象类的特征和行为，也就是对应的类的属性和方法。 这里呢，我把元素的ID作为属性，增删改查的四...
【JavaScript】面向对象——构造函数（详解）
qq_49002903的博客
06-01 1530
文章目录理解并上手使用javascript中的构造函数1、我们先理解什么是构造函数？2、JavaScript中的构造函数是怎么样的？3、使用new操作符会发生什么？4、构造函数的属性5、构造函数与函数的区别 理解并上手使用javascript中的构造函数 1、我们先理解什么是构造函数？ 构造函数也称之为构造器，通常是我们在创建对象时会调用的函数； 在其他面向对象的编程语言里面，构造函数是是存在于类中的一个方法，称之为构造函数； 但是在JavaScript中的构造函数有点不太一样； 2、JavaScrip
javascript 面向对象的JavaScript类
10-29
一节来说下紧接着的一个概念——类。虽然JavaScript中没有class关键字，但作为开发人员我们一定要有这个思想。在C#中类可以分为实例类和静态类，JavaScript亦然。
JavaScript 面向对象的之私有成员和公开成员
10-29
节来说下JavaScript的私有成员和公开成员，虽然JavaScript没有private和public关键字，但还是那句话——作为开发人员我们要有面向对象的思想！
从面试题学习Javascript 面向对象（创建对象）
12-11
题目： 代码如下: try{ var me = Man({ fullname: “小红” }); var she = new Man({ fullname: “小红” });...用户未输入> ——————*/ me.attr(“fullname”, “小明”); me.attr(“gender”, “男”);
javascript学习7——javascript DOM(上)
黎明前的黑暗
03-13 1212
什么是DOM           DOM不是javascript，DOM是文档。           DOM是一组用来描述脚本怎样与结构化文档进行交互和访问的web标准。           DOM定义了一系列对象、方法和属性，用于访问、操纵和创建文档中的内容、结构、样式以及行为。 继承在DOM中的作用            当浏览器解析完某文档文件后，每个结点并非就是一个简单的Elem
挂起一个问题（javascript）
黎明前的黑暗
11-19 1137
今天在做例子的时候，遇到一个问题，贴出来，做为自己待解决问题，          也希望能得到高人的指点。           HTML代码如下： 禁止访问页面元素的快捷菜单 function nomenu() { alert('对不起，不行'); event.returnValue=false; } The conte
javascript学习3——javascript面向对象（上）
黎明前的黑暗
02-25 1025
JS中的对象                           在JS中也一样，everything is object，对象是一切的基础。                 对象就是包含一组变量和函数的集合实例。通常对象由类派生而来，而类定义了对象拥有的属性和方法。如果你的脚本都是对象之间的交互操作，那么就可以说这个脚本是面向对象的脚本。JavaScript是一种基于原型（ptototype
javascript学习6——javascript面向对象（实战） 制作调试日志
黎明前的黑暗
03-11 945
一般我们在javascript看效果的时候，往往会用alert函数。           试想，如果我们想看一下document下有多少个对象，那么，我们要可能会写出这样的代码： for(i in document) { alert(i); }           可是在document下有一百多个对象，那么我们要在浏览器中不停的单击一百多次才可以看全，为此， 我们来制
javascript学习1——构建自己的JS库
黎明前的黑暗
11-14 784
前言        库是一个饱受争议的热门话题。一种观点认为它是一种非常棒的工具，是任何开发者都不可或缺的；另一种观点则认为在不理解库的内部工作原理的情况下对库形成依赖，会助长懒惰的风气从而导致开发者素质下降。但是不管怎么样，好像每个人都赞同编写自己的库，况且把自己日常用到的东西合并到一起本身就是一件有意义的事情。         下面我们开始建立自己的JS库，并编写两个自己的方法 //作者
javascript学习2——javascript常见问题
黎明前的黑暗
11-14 732
1、JS中方法和变量都是区分大小写的          2、单引号、双引号在JS中没有特殊的区别，都可以用来创建字符串。但作为一般性规则，大多数开发人员喜欢用单引号而不是双引号，但是XHTML规范要求所有属性值都必须使用双引号括起来。这样在JS中使用单引号，而对XHTML使用双引号会使混合两者代码更方便也更清晰。               单引号可以包含双引号，同理，双引号也可以包含单引号。
JavaScript有待学习高级内容
黎明前的黑暗
11-22 602
这些天学习javaScript有一段时间了，这些天的学习路线是这样的。           首先我看了一个基础的视频，很基础，然后看了一个高级的视频，发现在自己接受起来有困难，很多东西都搞不明白，听不懂。自己就想，是不是因基础不好，于是就找了两本电子书，也是一个比较基础、一个是偏向于高级的。            现在只是看完了基础的部分，给我总印象就是从运算符到一些对象的属性、方法、事件。
javascript学习4——javascript面向对象（中）
黎明前的黑暗
03-02 456
创建自己的对象         实例化的过程：首先通过new关键字告知JS创建一个全新对象。然后新建的实例被赋值给一个变量，以便你可以通过引用那个变量来访问对象的新实例。不过为了做到这一点，所实例化的对象必须是一个构造函数。         第个核心对象，如object、Function、Array和String都含有构造函数。               创建构造方法
什么是mysql安装配置教程以及学习mysql安装配置教程的意义
最新发布
05-21
mysql安装配置教程
javascript知识训练——字符串对象
06-28
字符串对象是JavaScript中的一种数据类型，用于表示文本数据。字符串对象可以包含任何字符，包括字母、数字、符号和空格等。在JavaScript中，字符串对象是不可变的，也就是说一旦创建就不能修改。但是可以通过一些...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值