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

时间:2022-03-24 13:57:51

相关链接:

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

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

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

1.this的使用

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

语法:

Function 类(){

this.属性=值;

}

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

 function Person(){
this.name = 'zhangsan';
this.age = 30;
}
var p1 = new Person();
var p2 = new Person(); alert(p1.name + p1.age);
alert(p2.name + p2.age);

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

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

 function Person(p_name,p_age){
this.name = p_name;
this.age = p_age;
}
var p1 = new Person('zhangsan',30);
var p2 = new Person('lisi',20); alert(p1.name + p1.age);
alert(p2.name + p2.age);

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

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

2.对象之间的赋值

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

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

 function Person(p_name,p_age){
this.name = p_name;
this.age = p_age;
}
function display(obj){
alert(obj.name + obj.age);
}
var p1 = new Person('zhangsan',30);
display(p1);

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

 function Person(p_name,p_age){
this.name = p_name;
this.age = p_age;
}
function display(){
var p1 = new Person('zhangsan',30);
return p1;
}
var per=display();
alert(per.name+per.age);

3.for...in语句

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

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

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

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

4.delete的使用

delete的主要功能:删除属性

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

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

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

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

5.成员方法

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

 function Person(p_name,p_age){
this.name = p_name;
this.age = p_age;
this.say=function(){
alert(this.name + this.age);
}
}
var p1 = new Person('zhangsan',30);
var p2 = new Person('lisi',20);
p1.say();
p2.say();

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

6.json对象的使用

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

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

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

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

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

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

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

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

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

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

php中处理json的方式:

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

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

7.prototype的使用

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

格式:class.prototype

 //例1
function Person(p_name){
this.name = p_name;
}
var p2 = new Person('wangwu');
Person.prototype.age = 30;
Person.prototype.speak=function(){
alert(this.name+this.age);
}
var p1 = new Person('zhangsan');
p1.speak();
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构造器。

 //例2
function Person(p_name){
this.name = p_name;
}
Person.prototype.age = 30;
var p1 = new Person('zhangsan');
p1.age=10;
alert(p1.age);
alert(p1.constructor.prototype.age);

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

8.原型继承与原型链

所有类的父类都是Object类。

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

 function Person(p_name){
this.name = p_name;
}
Object.prototype.age = 30;
Object.prototype.speak=function(){
alert(this.name+this.age);
}
var p1 = new Person('zhangsan');
p1.speak();

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

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

  1. C&plus;&plus;:基类与派生类对象之间的赋值兼容关系

    4.5 基类与派生类对象之间的赋值兼容关系 在一定条件下,不同类型的数据之间可以进行类型转换,例如可以将整型数据赋给双精度型变量. 在赋值之前,先把整型数据转换为双精度型数据,然后再把它双精度型变量. ...

  2. JS根据key值获取URL中的参数值,以及把URL的参数转换成json对象

    //把url的参数部分转化成json对象 parseQueryString: function (url) { var reg_url = /^[^\?]+\?([\w\W]+)$/, reg_par ...

  3. 【js操作url参数】获取指定url参数值、取指定url参数并转为json对象

    获取指定url参数值 /* 获取某url中的某参数值 调用:GetUrlQueryString("[url地址]","[参数名]"); */ function ...

  4. ArrayList两个对象之间的赋值

    List<String> list1 = new ArrayList<String>(); List<String> list2 = new ArrayList&l ...

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

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

  6. JavaScript基础精华02&lpar;函数声明,arguments对象,匿名函数,JS面向对象基础&rpar;

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

  7. JS中实现JSON对象和JSON字符串之间的相互转换

    对于主流的浏览器(比如:firefox,chrome,opera,safari,ie8+),浏览器自己提供了JSON对象,其中的parse和stringify方法实现了JSON对象和JSON字符串之间 ...

  8. 关于JS面向对象中原型和原型链以及他们之间的关系及this的详解

    一:原型和原型对象: 1.函数的原型prototype:函数才有prototype,prototype是一个对象,指向了当前构造函数的引用地址. 2.函数的原型对象__proto__:所有对象都有__ ...

  9. JS 中 JSON 对象与字符串之间的相互转换

    在开发的过程中,如果对于少量参数的前后台传递,可以直接采用ajax的data函数,按json格式传递,后台Request即可,但有的时候,需要传递多个参数,这样后台 接受的时候Request多个很麻烦 ...

随机推荐

  1. WebService -- Java 实现之 CXF &lpar; 使用Spring添加拦截器)

    最重要的就是在ApplicationContext.xml下面添加配置 <!-- service provider --> <jaxws:endpoint implementor=& ...

  2. 用vuejs写了一个酷狗的webApp

    这几天在学习vueJS,学了半个月,觉得是不是该写点什么呢?于是 .脑子一抽,仿了一个酷狗的webapp. 项目截图: 由于是单页应用,切换路由时音乐不会停止,算是一个小亮点吧. 技术栈: vuejs ...

  3. Oracle启动和停止

    概述 只有具备sysdba和sysoper系统特权的用户才能启动和关闭数据库. 在启动数据库之前应该启动监听程序,否则就不能利用命令方式来管理数据库,包括启动和关闭数据库. 虽然数据库正常运行,但如果 ...

  4. 【原创】Mysql中select的正确姿势

    引言 大家在开发中,还有很多童鞋在写查询语句的时候,习惯写下面这种不规范sql select * from table 而不写成下面的这种规范方式 select col1,col2,...,coln ...

  5. ReactNative系列组件用法&lpar;一&rpar;

    首先我们来认识view 改变一些特性,再来看看项目的变化 我们新增flex布局的一些属性,再来看看项目的变化 接下来我们来看看如果获取屏幕的分辨率 关于图片的用法,reactNative这里也是很神奇 ...

  6. 【ARTS】01&lowbar;03&lowbar;左耳听风-20181126~1202

    ARTS: Algrothm: leetcode算法题目 Review: 阅读并且点评一篇英文技术文章 Tip/Techni: 学习一个技术技巧 Share: 分享一篇有观点和思考的技术文章 Algo ...

  7. FPM定制RPM包

    安装FPM FPM是ruby写的打包工具,ruby版本要大于1.8.5 #安装ruby环境和gem包管理器 [root@test88 ~]# yum install -y ruby rubygems ...

  8. java classloader原理深究

    前面已经写过一篇关于java classloader的拙文java classloader原理初探. 时隔几年,再看一遍,觉得有些地方显得太过苍白,于是再来一篇: 完成一个Java类之后,经过java ...

  9. pahlcon&colon;cookies设置

    非加密方式(简单,但不推荐) 步骤 1 在全局容器中加入Cookie: $di->set('cookies', function () { $cookies = new \Phalcon\Htt ...

  10. 成都Uber优步司机奖励政策(1月29日)

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...