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

    相关链接:

    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为当前对象添加属性

    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构造器的原型对象中去找,这个就是原型链。

  • 相关阅读:
    在一个字符串中找到第一个只出现一次的字符
    查找最小的k个数
    动规:最大上升子序列
    平衡二叉树
    【笔记】php和mysql结合 搞了一个表出来
    设计模式心得(既设计模式篇终章):描述设计模式时的通用公式
    分享系列 之 linux IO原理与几种零拷贝机制的实现
    近期分享:BIO 与 NIO 的实质区别到底是什么?
    源码阅读笔记 之 ThreadLocal —— 不复杂,却有点绕的一个 per thread API
    小脑袋瓜充满了问号:为什么AMQP可以叫做 Advanced?JMS就要low一等吗?
  • 原文地址:https://www.cnblogs.com/platycoden/p/5211000.html
Copyright © 2011-2022 走看看