javascript笔记整理(对象遍历封装继承)
一、javascript对象遍历
1.javascript属性访问
对象.属性名
对象['属性名']
- var obj={name:'chen',red:function(){
- alert(1);return 2;
- }};
- alert(obj['name']);
- alert(obj.name);
2.javascript属性遍历(for in)
- //( obj[i] )此格式才有效
var obj={- name:'chen',
- red:function(){
- alert(1);
- return 2;
- },
- so:'rui'
- };
- for(var i in obj){
- alert(obj[i]);
- }
- //arguments
- //检测参数个数:arguments.length
- //访问第i个值:arguments[i]
- function myArray () {
- var lengs= arguments.length;
- for (var i=0; i<lengs; i++) {
- this[i]=arguments[i];
- }
- }
- var arr=new myArray('chen','20','suncco');
- alert(arr[1]);
二、对象的特性之封装
把对象所有的组成部分组合起来,尽可能的隐藏对象的部分细节,使其受到保护;只保留有限的接口和外部发生联系。
- //工厂函数
- function app(name,size){
- var apps={};
- apps.name=name;
- apps.size=size;
- apps.lookName=function(){
- return name;
- }
- apps.lookSize=function(){
- return size;
- }
- return apps;
- }
- var arr=app('chen','20M');
- alert(arr.lookName()); 结果:chen
- //构造函数
- function app(name,size){
- this.name=name;
- this.size=size;
- this.lookName=function(){
- return this.name;
- }
- this.lookSize=function(){
- return this.size;
- }
- }
- var arr=new app('chen','20M');
- alert(arr.name); 结果:chen
- alert(arr.lookName()); 结果:chen
构造函数跟工厂函数类似,构造函数比较正式;但里面的方法一样,占用了内存空间。
- //原型:prototype方法
- function app(name,size){
- this.name=name;
- this.size=size;
- this.lookName=function(){
- return this.name;
- }
- }
- app.prototype.lookSize=function(){
- return this.name;
- }
- var arr=new app('chen','20M');
- delete arr.size;
- alert(arr.size); 结果:undefined
- delete arr.lookSize;
- alert(arr.lookSize()); 结果:chen
prototype方法会使属性或方法一直存在代码段当中;但是不能实例化对象,只能实例化属性或对象!
- //混合方法
- function app(name,size){
- this.name=name;
- this.size=size;
- this.lookName=function(){
- return this.name;
- }
- //把prototype方法放到函数里头
- app.prototype.lookSize=function(){
- return this.name;
- }
- }
- var arr=new app('chen','20M');
- delete arr.size;
- alert(arr.size);//undefined
- delete arr.lookSize;
- alert(arr.lookSize());//chen
javascript对象的继承和Object对象
一、Object对象(对象的一个类可以从现有的类中派生,并且拥有现有的类的方法或是属性,这和过程叫做继承。被继承的类叫做父类或是基类,继承的类叫做子类。(一个对象拥有另一个对象的属性和方法))
优点:
提高代码的重用性
提高代码的可维护性
提高代码的逻辑性
a.constructor——返回对创建此对象的数组函数的引用
- //++++++
- function app(name,size){
- this.name=name;
- this.size=size;
- this.lookName=function(){
- return this.name;
- }
- app.prototype.lookSize=function(){
- return this.name;
- }
- }
- var arr=new app('chen','20M');
- //+++++++
- alert(arr.constructor); 结果:返回+号内的代码
b.Prototype 原型——对该函数对象的对象原型的引用。是函数对象的默认属性
- var obj=new fun1();
- function fun1 () {
- this.name="zhangsan";
- }
- alert(obj.prototype); 结果:undefined
- alert(fun1.prototype); 结果:object
对象的共享属性存放到代码段当中。
可以实现继承
- //hasOwnProperty(property)
- //判断一个对象是否有你给出名称的属性或对象
- var obj=new fun1();
- function fun1 () {
- this.name="zhangsan";
- }
- alert(obj.hasOwnProperty("name")); 结果:true
- //IsPrototypeOf(object)
- //判断该对象是否为另一个对象的原型(用来检测对象的类型)
- var arr=new Array();
- var arc=new app();
- function app(){
- }
- alert(app.prototype.isPrototypeOf(arc)) 结果:true
- alert(app.prototype.isPrototypeOf(arr)) 结果:false
二、继承
- //原型继承
- function person(){
- this.name="张三";
- this.say=function () {
- alert(this.name)
- }
- }
- function student(){
- }
- student.prototype=new person();
- var zhangsan=new student();
- zhangsan.say(); 结果:张三
- //call方法
- function person () {
- this.name="张三";
- this.say=function () {
- alert(this.name)
- }
- }
- function student () {
- this.name="李四";
- }
- var ren=new person ();
- var zhangsan=new student ();
- ren.say.call(zhangsan);
- //apply方法,参数以数组形式
- function person (name) {
- this.name=name;
- this.say=function () {
- alert(this.name)
- }
- }
- function student () {
- window.person.apply(this,["zhangsan"])
- }
- var zhangsan=new student ();
javascript笔记整理(对象遍历封装继承)的更多相关文章
- JavaScript内置对象与原型继承
(一) 理解JavaScript类定义 1>关于内置对象理解 console.log(Date.prototype.__proto__===Object.prototype //tru ...
- javascript中的对象创建与继承
js是一门基于原型的面向对象语言,与传统的面向对象如Java,C#相比,它在对象创建及继承上有自己独特的实现方式,本文主要描述js中对象创建及继承的一些实践. 1.对象创建 方式一:工厂模式创建对象 ...
- javascript笔记整理(对象的继承顺序、分类)
Object.prototype.say=function(){ alert("我是顶层的方法"); } children.prototype=new parent(); pare ...
- javascript笔记整理(对象基础)
一.名词解释 1.基于对象(一切皆对象,以对象的概念来编程) 2.面向对象编程(Object Oriented Programming,OOP) A.对象(JavaScript 中的所有事物都是对象) ...
- javascript笔记整理(DOM对象)
DOM--document(html xml) object modle,document对象(DOM核心对象),document对象是 Window 对象的一部分,可通过window.documen ...
- javascript笔记整理(window对象)
浏览器对象模型 (BOM--Browser Object Model),window对象是BOM中所有对象的核心 A.属性 1.(位置类型-获得浏览器的位置) IE:window.screenLeft ...
- javascript笔记整理(字符串对象)
一.属性 1.length——字符串的长度(不区分中英文) var a="chen陈"; alert(a.length); //结果:5 2.constructor——对象的构造函 ...
- javascript笔记整理(数组对象)
1.属性 a.length--设置或返回数组元素的数目 var a=[1,2,3,45,5]; alert(a.length=6) 结果:6 alert(a[5]) 结果:undefined b.co ...
- JavaScript笔记整理
整理一篇工作中的JavaScript脚本笔记,不定时更新,笔记来自网上资料或者自己经验归纳. (1) 获取Url绝对路径 function getUrlRelativePath() { var url ...
随机推荐
- vim插件管理之Vundle
Vim是一个类似于Vi的著名的功能强大.高度可定制的文本编辑器,在Vi的基础上改进和增加了很多特性.正是由于其可定制的特性, 许许多多的Vim插件便诞生了.管理这些插件又成为我们最为头疼的问题,最近无 ...
- select_related
作用:减少DB访问次数 from django.db import models class Blog(models.Model): name = models.CharField(max_lengt ...
- MVC3 Html.ActionLink
以下使用参数文字说明: linkText:生成的链接所显示的文字 类型:string actionName:对应控制器的方法 类型:string routeValues:向对应的action传递的 ...
- 系统运维-hub, repeater, switch, router初览
repeater, hub, switch, router都是针对与osi的7层网络模型的不同层而产生的设备,逐一概览如下: repeater:中继器 是网络物理层的一种连接设备,工作在osi的物理层 ...
- PCB设计铜铂厚度、线宽和电流关系
以下总结了网上八种电流与线宽的关系公式,表和计算公式,虽然各不相同(大体相近),但大家可以在实际的PCB板设计中,综合考虑PCB板的大小,通过电流,选择一个合适的线宽. 一.PCB电流与线宽 PCB载 ...
- 爬虫框架Scrapy
前面十章爬虫笔记陆陆续续记录了一些简单的Python爬虫知识, 用来解决简单的贴吧下载,绩点运算自然不在话下. 不过要想批量下载大量的内容,比如知乎的所有的问答,那便显得游刃不有余了点. 于是乎,爬虫 ...
- BZOJ 1622: [Usaco2008 Open]Word Power 名字的能量
题目 1622: [Usaco2008 Open]Word Power 名字的能量 Time Limit: 5 Sec Memory Limit: 64 MB Submit: 349 Solved ...
- java学习之二叉树的实现
二叉树是一种数据结构,每个节点都有两个子节点. 二叉树的遍历有三种方式, 先序遍历是 根节点,左子树,右子树: 中序遍历是 左子树,根节点,右子树: 后序遍历是 左子树,右子树,根节点: java实现 ...
- Android自定义控件实战——水流波动效果的实现WaveView
转载请声明出处http://blog.csdn.net/zhongkejingwang/article/details/38556891 水流波动的波形都是三角波,曲线是正余弦曲线,但是Android ...
- Eclipse快捷键 10个最有用的快捷键(转载)
现在很多开发人员都在用eclipse.用开发工具,就是为了方便,方便你开发你的软件,方便你管理你的工程,而开发工具提供各种功能大部分会有对应的快捷键,下面就列出了eclipse的快捷键. Ecli ...