js系列教程2-对象、构造函数、对象属性全解
全栈工程师开发手册 (作者:栾鹏)
快捷链接:
js系列教程1-数组操作全解
js系列教程2-对象和属性全解
js系列教程3-字符串和正则全解
js系列教程4-函数与参数全解
js系列教程5-容器和算法全解
js系列教程6-BOM操作全解
js系列教程7-DOM操作全解
js系列教程8-事件全解
js系列教程9-表单元素全解
js系列教程10-canvas绘图全解
js系列教程11-json、ajax、comet全解
js系列教程12-离线应用与存储全解
var student1 = new Object(); //定义对象引用,或者var student1 = {},new Object()。所有的包装类都派生于Object。Object基类包含hasOwnProperty、isPrototypeOf、propertyIsEnumerable、toLocaleString、toString、valueOf方法
student1.name = "student1"; //直接设置同时添加对象属性
student1["age"]=12; //直接设置同时添加对象属性
student1.getname = function(){ //设置添加对象方法。函数表达式,只有在执行到本行才解析
return this.name; //this表示作用对象,这里为student1
};
//var {name:personname, age:personage} = student1; //解构赋值,对应项使用副本赋值,如[value1,value2]=[value2,value1];可实现两个基本数据交换
printf(JSON.stringify(student1)); //JSON.stringify把对象转化为JSON字符串表示
student1 = {
name:"student1",
_age:12, //前面有下滑线是一种常用的标记,用于表示只能通过对象方法访问的属性,只是对开发者的一种标记习惯,并不是真的私有变量
getname:function(){
return this.name;
}
};
Object.defineProperty(student1,"name1",{ //可以用于定义新数据属性,也可以修改原有数据属性。也可以不使用defineProperty可以直接定义数据属性。也可以使用defineProperties同时定义多个数据或访问器属性
writable:true, //对象属性的数据属性,是否可修改
enumerable:true, //对象属性的数据属性,通过for-in遍历到
configurable:true, //对象属性的数据属性,能否通过delete删除属性,configurable属性在定义为false以后,就不能再被设置
value:"sst" //对象属性的值属性,默认为underfined
});
Object.defineProperty(student1,"age",{ //访问器属性,不能直接定义,必须通过defineProperty定义,不包含数据值,设置时调用set函数,读取时调用get函数。访问器属性名称不要和数据属性名称相同
get:function(){return this._age},
set:function(newvalue){this._age=newvalue;this.name="xxt";}
});
student1.age=22; //age不是数据属性,而是访问属性。这里是调用了set函数,
Object.preventExtensions(student1);//设置对象不可被扩展,以后再添加属性都是underfined,防止被篡改
Object.seal(student1); //密封对象,对象不能添加删除属性。
Object.freeze(student1); //冻结对象,属性不可修改。只能通过set访问器修改
printf(JSON.stringify(student1)); //将JSON格式转化为字符串。JSON格式即KEY-VALUE格式
for(var myproperty in student1){ //for in遍历对象属性
console.log(myproperty,":",student1[myproperty]);
}
function Student(name,age){ //自定义函数,构造函数,等同于java中的自定义类。所有的类型派生于Object
var sex="男"; //函数内部为私有属性
this.name=name; //通过this创建的是可以被实例对象访问的
this.age=age;
this.getName=function(){
return this.name; //函数内部this表示此函数引用的拥有者,不是传入参数。当作为全局函数时,this表示window
};
this.setName= function(name){ //函数不关心传入或者定义的参数数量和类型,因此所有函数没有重载
if(typeof name=="string") //基本数据类型,做类型检验,避免参数传递错误
this.name = name; //没有指定返回值,实际返回的是undefined
};
this.getAge =function (){
if(this.age.toFixed(2)<<2) //转化为false的值:"",0,NaN,null,underfined。其他转化为true,类型首字母大写,变量首字母小写,<<按位移动,<<<无符号按位移动,toFixed(2)表示保留2位小数
return -~this.age; //~按位取非,&按位取与,|按位取或 ^按位取异或,一元减号,表示取负
return this.age; //保证所有路径都有返回值,虽然不加也不会出错,因为有默认返回值undefined
};
this.setAge= function(age){ //函数参数总是按值传递,无论基本类型还是引用类型,引用类型传递引用的值,不传递指向对象的值
if(age instanceof Number){ //包装类型,做类型检验,避免参数传递错误
this.age = parseInt(age.toString(16),16);//parseInt将字符串化为整数,支持识别多进制和转化为多进制,toString()转化为字符串,支持多进制转化
}
//typeof判断基本类型,underfined声明未定义(underfined类型只有一个值),boolean布尔型,string字符串,number数值,object对象或null(null类也只有一个值),function函数
//instanceof判断包装类型,基本类型对象的包装类型为Underfined,Boolean,String,Number,Object,
typestr = typeof("getAge"); //省略var的变量为全局变量
}
}
student1=new Student("小明",12); //new是创建了一个新对象,构造函数将属性和方法绑定到这个新对象上
Student("小红",13); //作为全局函数。通过构造函数将属性绑定到window上
var student2 = new Object();
Student.call(student2,"小刚",14); //call和apply通过构造函数,将属性绑定到以存在对象student2上
if(student2 instanceof Student) //instanceof判断变量是否是某个类型或其派生类型实例的,student1是Student类,同时也是Object
printf(student2.name);
//js的继承有多重方式。每种方式的内存操作都是不同。下面展示其中一种。
// js的类型继承原理和java、c#相同。派生类继承基类时,会实例化(浅复制)一个基类对象和保留引用在派生类空间。派生类内的实例的基类和派生类自定义的函数分别操控各自的属性。在函数和属性操作中时,会自动先派生后基类的顺序查找,不用手动查找
//关于实例化:只复制且全部复制在构造函数中开辟了内存的变量,包括引用变量。派生类实例化时基类对象进行浅复制。
function Monitor(){ //自定义函数,相当于自定义一个类,类名Monitor。在文件中多称为构造函数,相当于c++和java中的自定义类。每个函数类,都有基类Object
this.task=["学习"];
}
Monitor.prototype.data = "原型数据"; //prototype获取派生类的基类对象引用,通过基类对象引用直接为基类添加属性。系统会为派生类提供默认原型,也可以通过继承自定义原型
person1 = new Monitor(); //通过函数类实例化对象
person2 = new Monitor(); //实例化对象
Object.getPrototypeOf(person1).data="原型数据1"; //通过实例修改原型。Object.getPrototypeOf()获取对象原型。实例对象包含对原型的引用,但需要使用getPrototypeOf函数获取
person1.data="派生数据"; //修改派生类属性,这样当查找data数据会先自动搜索派生类,再自动搜素基类。
printf(person1.hasOwnProperty("data")); //是否拥有指定属性(不算基类属性)。true因为自定义了该属性
printf(person1.data); //读取自定义属性
var keys = Object.keys(Monitor.prototype); //获取对象所拥有(不包括继承的)的可枚举实例,Monitor是类,Monitor.prototype是基类实例。如果换成person1,则只能获取派生类的自定义属性。getOwnPropertyNames可获取对象拥有的所有属性
printf(keys);
delete person1.data; //删除派生类自定义的属性
printf(person1.hasOwnProperty("data")); //是否拥有指定属性。false,因为该属性在派生类中被删除了,只有基类中存在,虽然可以访问,但是是继承过来的,不是自己拥有的
printf("data" in person1); //是否包含指定属性。true包含,只是不拥有
printf(person1.data); //基类属性
Monitor.prototype.sex=["男"]; //通过派生类向基类添加数组引用变量
person1.sex.push("女"); //在实例对象中保留了基类的引用和浅复制了基类对象。这里的sex是经过了一次从派生类到基类的向上查询。
printf("基类中的引用:"+person2.sex); //实例对象连带更新。所以构造函数用于指定专属属性,原型用于存放共享属性
person1.task.push("工作"); //修改构造函数中引用指向的对象
printf("派生类中的引用:"+person2.task); //实例对象不连带更新构造函数中的数据。因为实例化时会深复制构造函数中的所有数据,在实例化时为每个对象都创建
Monitor.prototype=new Student("组长",12); //继承,派生类Person设置基类为Student。在继承中会为浅复制一个基类实例放在派生类空间中,同时将引用存储为prototype,放在派生类Person中
js系列教程2-对象、构造函数、对象属性全解的更多相关文章
- 史上最全面的SignalR系列教程-4、SignalR 自托管全解(使用Self-Host)-附各终端详细实例
1.概述 通过前面几篇文章 史上最全面的SignalR系列教程-1.认识SignalR 史上最全面的SignalR系列教程-2.SignalR 实现推送功能-永久连接类实现方式 史上最全面的Signa ...
- js系列教程1-数组操作全解
全栈工程师开发手册 (作者:栾鹏) 快捷链接: js系列教程1-数组操作全解 js系列教程2-对象和属性全解 js系列教程3-字符串和正则全解 js系列教程4-函数与参数全解 js系列教程5-容器和算 ...
- JavaScript对象的property属性详解
JavaScript对象的property属性详解:https://www.jb51.net/article/48594.htm JS原型与原型链终极详解_proto_.prototype及const ...
- 【D3.V3.js系列教程】--(十四)有路径的文字
[D3.V3.js系列教程]--(十四)有路径的文字 1. 在 svg 中插入一個 text // 在 body 中插入一個 svg var svg = d3.select('body').appen ...
- 【D3.V3.js系列教程】--(十五)SVG基本图形绘制
[D3.V3.js系列教程]--(十五)SVG基本图形绘制 1.path <!DOCTYPE html> <html> <head> <meta charse ...
- 【D3.V3.js系列教程】--(十二)坐标尺度
[D3.V3.js系列教程]--(十二)坐标尺度 1.多种类型的缩放尺度 Quantitative Scales Linear Scales Identity Scales Power Scales ...
- js系列教程11-json、ajax(XMLHttpRequest)、comet、SSE、WebSocket全解
js系列教程11-json.ajax(XMLHttpRequest).comet.SSE.WebSocket全解:https://blog.csdn.net/luanpeng825485697/art ...
- SpringBoot系列教程JPA之query使用姿势详解之基础篇
前面的几篇文章分别介绍了CURD中的增删改,接下来进入最最常见的查询篇,看一下使用jpa进行db的记录查询时,可以怎么玩 本篇将介绍一些基础的查询使用姿势,主要包括根据字段查询,and/or/in/l ...
- SpringBoot系列教程JPA之delete使用姿势详解
原文: 190702-SpringBoot系列教程JPA之delete使用姿势详解 常见db中的四个操作curd,前面的几篇博文分别介绍了insert,update,接下来我们看下delete的使用姿 ...
随机推荐
- 201521123118《java程序与设计》第8周学习总结
1. 本周学习总结 1. 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 2. 书面作业 1. List中指定元素的删除(题目4-1) 1.1 实验总结 Scanner sc = new ...
- Java补码表和位移运算符
在java中数据都是以二进制的形式保存的. 但是我们看到的数据怎么是10进制的? 因为java展示之前会自动调用toString()方法 这里以4位2进制为例,4位2进制只能表示16个数,即0-15. ...
- 201521123081《java程序设计》 第11周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 参考资料:XMind ============================================== ...
- java课程设计(Calculator) 201521123027 陈龙
1.团队博客链接 http://www.cnblogs.com/DevilRay/p/7064482.html 2.个人负责模块或任务说明 (1)主函数的编写: (2)加减乘除运算的实现: (3)求倒 ...
- 笔记3 linux 多线程 条件变量+互斥锁
//cond lock #include<stdio.h> #include<unistd.h> #include<pthread.h> struct test { ...
- 二分求最长上升子序列 二分LIS
#include <iostream> #include <cstring> #define N 50010 using namespace std; int n; int n ...
- bookStore项目总结
感想 该项目是目前为止,我写过代码量最多的项目了-..虽然清楚是没有含金量的[跟着视频来写的],但感觉自己也在进步中-.. 写的过程中,出了不少的问题-..非常多的Servlet,JSP看得眼花-.. ...
- Struts2-在js中使用struts2标签
1, 支行是下拉列表,自助银行也是下拉列表,它们是级联关系; <tr> <th width="17%"><span>*</span> ...
- jmeter通过BeanShell 脚本,实现对http请求参数的加密
jmeter一直是一款很好的接口和性能测试工具,它是开源的,不需要为此支付任何费用,而且可以下载源码,可以在修改源代码并在此基础上拓展自己的功能或插件,它可以跟ant和jenkins结合起来搭建自己的 ...
- Struts2基于XML配置方式实现对Action方法进行校验
JavaWeb框架(2) 使用XML对Action方法进行校验方式有两种,一种是对Action的所有方法进行校验,另一种是对Action指定方法进行校验. 对Action的所有方法进行校验: 步骤: ...