1.this的使用

核心:在js中,this表示当前对象,“谁”调用了当前函数,“this”就指向了“谁”

语法:

Function 类(){

this.属性=值;

}

例1.在构造器中,使用this为当前对象添加属性

1 function Person(){
2 this.name = 'zhangsan';
3 this.age = 30;
4 }
5 var p1 = new Person();
6 var p2 = new Person();
7
8 alert(p1.name + p1.age);
9 alert(p2.name + p2.age);

创建的这两个对象,它们的属性是一样的,但值也是相同的。

例2.使用this为构造函数传参

1 function Person(p_name,p_age){
2 this.name = p_name;
3 this.age = p_age;
4 }
5 var p1 = new Person('zhangsan',30);
6 var p2 = new Person('lisi',20);
7
8 alert(p1.name + p1.age);
9 alert(p2.name + p2.age);

在构造器中定义形参,实例化对象时,通过构造函数传参传递数据。

关于this的深入理解:函数是由对象调起来的,在函数中的this就指向了这个对象。所有函数都是面向对象调用,普通函数的调用是由window对象调用的。

2.对象之间的赋值

对象之间的赋值都是按地址进行传递的。

第一种:将对象作为参数传递

1 function Person(p_name,p_age){
2 this.name = p_name;
3 this.age = p_age;
4 }
5 function display(obj){
6 alert(obj.name + obj.age);
7 }
8 var p1 = new Person('zhangsan',30);
9 display(p1);

第二种:将对象作为返回值返回(好处:返回多个值)

 1 function Person(p_name,p_age){
2 this.name = p_name;
3 this.age = p_age;
4 }
5 function display(){
6 var p1 = new Person('zhangsan',30);
7 return p1;
8 }
9 var per=display();
10 alert(per.name+per.age);

3.for...in语句

解决问题:我们在程序中,接受参数或返回值之后,我们通过for...in语句遍历取得当前对象的所有属性

1 function Person(p_name,p_age,p_email){
2 this.name = p_name;
3 this.age = p_age;
4 this.email = p_email;
5 }
6 var p1 = new Person('zhangsan',30,'ls@163.com');
7 for (var i in p1){
8 document.write(i + ':' + p1[i] + '<br>');
9 }

结果:name:zhangsan  age:30  email:ls@163.com

for...in语句不仅可以遍历自定义对象,也可以遍历系统对象。

4.delete的使用

delete的主要功能:删除属性

比如说,程序中有一个对象,我们在对其进行取值之后,如果不想保留这个对象中的某个属性,可以使用delete将其清除

 1 function Person(p_name,p_age,p_email){
2 this.name = p_name;
3 this.age = p_age;
4 this.email = p_email;
5 }
6 var p1 = new Person('zhangsan',30,'ls@163.com');
7 delete p1.name;
8 for (var i in p1){
9 document.write(i + ':' + p1[i] + '<br>');
10 }

结果:age:30  email:ls@163.com

注意:delete只能删除自定义对象属性,不能删除系统对象的属性。

5.成员方法

例如:在实例化对象的同时,让其自动拥有某些方法

 1 function Person(p_name,p_age){
2 this.name = p_name;
3 this.age = p_age;
4 this.say=function(){
5 alert(this.name + this.age);
6 }
7 }
8 var p1 = new Person('zhangsan',30);
9 var p2 = new Person('lisi',20);
10 p1.say();
11 p2.say();

关于成员方法在内存中的表现形式:用p1来举例,p1和p1指向堆内存的地址保存在栈内存当中;堆内存当中,保存着[name:zhangsan]和[age:30]以及[say:指向代码段的地址];代码段中保存着say的function(){...}。

6.json对象的使用

背景:首先js中的对象是指属性的无需集合(一个对象是有若干个属性构成的),所谓“集合”是指“名/值”对的集合(js中,可以使用{}来表示这个集合)。

语法:json对象{属性名:属性值,属性名:属性值,属性名:属性值......}

1 //定义一个json对象
2 var p1 = {name:'zhangsan',age:30,email:'zs@163.com'};
3 var p2 = {'name':'zhangsan','age':30,'email':'zs@163.com'};
4 var p3 = {"name":'zhangsan',"age":30,"email":'zs@163.com'};
5
6 //使用json对象
7 alert(p1.name+p1.age+p1.email);
8 alert(p2.name+p2.age+p2.email);
9 alert(p3.name+p3.age+p3.email);

定义json对象的属性时,可以使用三种格式:Name, 'Name', "Name"。json是Object类下的一个对象。

 1 //定义json数组来保存多个人的信息
2 var per = [
3 {name:'zhangsan',age:30,email:'zs@163.com'},
4 {'name':'zhangsan','age':30,'email':'zs@163.com'},
5 {"name":'zhangsan',"age":30,"email":'zs@163.com'}
6 ];
7
8 //遍历json数组
9 for (var i=0;i<per.length;i++){
10 document.write(per[i].name+':'+per[i].age+'<br>');
11 }

通过构造器得到一个对象与使用json来创建对象的特点:

使用json创建对象省略了构造器的定义,一般用与只需要一个对象

使用构造器可以简化属性的定义,需要多个相同属性或方法的对象

json的成员方法:为json对象添加一个属性,属性值是一个函数

1 var json = {name : 'zhangsan',say:function(){
2 alert(this.name);
3 }};
4 json.say();

php中处理json的方式:

生成json:String json_encode($obj|$row)

解析json:json_decode($jsonstr,$flag) [注: true:解析到数组中  false:解析到对象中  默认:false]

7.prototype的使用

功能:返回对象类原型的引用

格式:class.prototype

 1 //例1
2 function Person(p_name){
3 this.name = p_name;
4 }
5 var p2 = new Person('wangwu');
6 Person.prototype.age = 30;
7 Person.prototype.speak=function(){
8 alert(this.name+this.age);
9 }
10 var p1 = new Person('zhangsan');
11 p1.speak();
12 p2.speak();

在例1中,我们利用prototype为Person类下的所有对象添加一个叫age的属性和speak方法。注意的是,Person.prototype.age和Person.age是有区别的。Person.prototype.age是指为Person类下的实例添加age属性,而Person.age是指为Person类添加的静态属性。

原理:JS底层在加载Person构造器的时候,会生成一个与之对应的,完全独立的Person原型对象。 在Person构造器内有一个prototype的属性。在Person原型对象里面有一个constructor属性。Person构造器下的prototype指向Person原型对象,Person原型对象下的constructor指向Person构造器。

1 //例2
2 function Person(p_name){
3 this.name = p_name;
4 }
5 Person.prototype.age = 30;
6 var p1 = new Person('zhangsan');
7 p1.age=10;
8 alert(p1.age);
9 alert(p1.constructor.prototype.age);

结果:第一个弹出10,第二个弹出30。p1.age相当于为p1对象动态添加了一个叫age的属性。但没有改变Person原型对象中的值。

8.原型继承与原型链

所有类的父类都是Object类。

原型是一个对象,它是Object类下的一个实例。当系统为Person构造器创建原型对象时,JS会执行:Person.prototype = new Object();。所以Object类下的所有属性和方法会被这个原型对象所拥有。Person下的实例就可以通过这个原型对象使用这些属性和方法。这也是Object是所有类的父类的原因。

1 function Person(p_name){
2 this.name = p_name;
3 }
4 Object.prototype.age = 30;
5 Object.prototype.speak=function(){
6 alert(this.name+this.age);
7 }
8 var p1 = new Person('zhangsan');
9 p1.speak();

原型链的举例:Person原型对象也是对象,当这个对象找不到某个属性时,会找到Object构造器的原型对象中去找,这个就是原型链。

js面向对象3的更多相关文章

  1. js面向对象学习 - 对象概念及创建对象

    原文地址:js面向对象学习笔记 一.对象概念 对象是什么?对象是“无序属性的集合,其属性可以包括基本值,对象或者函数”.也就是一组名值对的无序集合. 对象的特性(不可直接访问),也就是属性包含两种,数 ...

  2. 带你一分钟理解闭包--js面向对象编程

    上一篇<简单粗暴地理解js原型链--js面向对象编程>没想到能攒到这么多赞,实属意外.分享是个好事情,尤其是分享自己的学习感悟.所以网上关于原型链.闭包.作用域等文章多如牛毛,很多文章写得 ...

  3. JS面向对象(3) -- Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法

    相关链接: JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式 JS面向对象(2) -- this的使用,对 ...

  4. JS面向对象(2) -- this的使用,对象之间的赋值,for...in语句,delete使用,成员方法,json对象的使用,prototype的使用,原型继承与原型链

    相关链接: JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式 JS面向对象(2) -- this的使用,对 ...

  5. JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式

    相关链接: JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式 JS面向对象(2) -- this的使用,对 ...

  6. js面向对象的实现(example 二)

    //这个方法和上篇文章(js面向对象的实现(example 一))中的方法类似,但是更为简洁 //通过函数赋值的方式来构造对象 //同样通过闭包的方式来封装对象及内部变量 (function () { ...

  7. 浅谈JS面向对象之创建对象

    hello,everybody,今天要探讨的问题是JS面向对象,其实面向对象呢呢,一般是在大型项目上会采用,不过了解它对我们理解JS语言有很大的意义. 首先什么是面向对象编程(oop),就是用对象的思 ...

  8. js面向对象,有利于复用

    需求:在网页上添加个天气预报. 以前总是在需要执行js的地方,直接写function(){}.在需要同样功能的地方直接copy,或者稍微修改. 然后在网上看看有没有好点的方法,然后就看到js面向对象编 ...

  9. JavaScript基础精华02(函数声明,arguments对象,匿名函数,JS面向对象基础)

    函数声明 JavaScript中声明函数的方式:(无需声明返回值类型) function add(i1, i2) {             return i1 + i2;//如果不写return返回 ...

  10. 原生JS面向对象思想封装轮播图组件

    原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...

随机推荐

  1. 在成员函数中调用虚函数(关于多态的注意事项)------新标准c++程序设计

    类的成员函数之间可以互相调用.在成员函数(静态成员函数.构造函数和析构函数除外)中调用其他虚成员函数的语句是多态的.例如: #include<iostream> using namespa ...

  2. SQL数据库查询语言(1)

    目录 MySQL数据库 MySQL安装与配置 DDL数据定义语言 创建数据库 查看.删除数据库 修改.备份.恢复数据库 创建表 修改表 MySQL常用数据类型 DML数据操纵语言 Insert语句 m ...

  3. C#/ASP.NET对URL中的中文乱码处理

    前言:UTF-8中,一个汉字对应三个字节,GB2312中一个汉字占用两个字节. 不论何种编码,字母数字都不编码,特殊符号编码后占用一个字节. 1.直接在C#后台编码URL参数 引用类库:System. ...

  4. 如何在UITableViewController上添加一个固定的视图

    最近在使用UITableViewController,想在上面添加一个固定的视图,不随ScrollView滑动而移动.最后找到2种解决办法,一种是计算TableView的偏移,调整视图的位置,不断更新 ...

  5. update 多表链接

    update Aset A.shl = A.shl - B.shl from retmxls A,daysphz Bwhere A.spid = B.spid and A.fdbs = B.fdbs ...

  6. IO模型之三Reactor 和 Proactor IO设计模式

    反应器Reactor: 在事件驱动的应用中,应用中的请求总是通过事件(如CONNECTOR.READ.WRITE等)来表示,当多个请求同时到来时,这些请求最终还是会被序列化地处理,在序列化处理这些服务 ...

  7. Qt 学习之路 2(62):保存 XML

    Home / Qt 学习之路 2 / Qt 学习之路 2(62):保存 XML Qt 学习之路 2(62):保存 XML  豆子  2013年8月26日  Qt 学习之路 2  9条评论 前面几章我们 ...

  8. java 加载properties

    /** * 取得属性值,无值时返回默认值 * @param name String 属性名称 * @param defaultValue String 属性名称 * @return String 属性 ...

  9. 洛谷 P4093 [HEOI2016/TJOI2016]序列(Cdq+dp)

    题面 luogu 题解 \(Cdq分治+dp\) \(mx[i],mn[i]\)分别表示第\(i\)位最大,最小能取到多少 那么有 \(j < i\) \(mx[j] \le a[i]\) \( ...

  10. C# 检查键盘是否唤醒到桌面上显示

    大概需要的win32函数 public static extern IntPtr FindWindow(string lpClassName, string lpWindowName)//返回值为具有 ...