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

  • 相关阅读:
    “XXXXX” is damaged and can’t be opened. You should move it to the Trash 解决方案
    深入浅出 eBPF 安全项目 Tracee
    Unity3d开发的知名大型游戏案例
    Unity 3D 拥有强大的编辑界面
    Unity 3D物理引擎详解
    Unity 3D图形用户界面及常用控件
    Unity 3D的视图与相应的基础操作方法
    Unity Technologies 公司开发的三维游戏制作引擎——Unity 3D
    重学计算机
    windows cmd用户操作,添加,设备管理员组,允许修改密码
  • 原文地址:https://www.cnblogs.com/platycoden/p/5211000.html
Copyright © 2011-2022 走看看