美文网首页
面向对象与原型(一)

面向对象与原型(一)

作者: 一江碎月 | 来源:发表于2017-10-19 21:10 被阅读0次

定义

有两种方式定义对象。

new Object() 形式

通过 new Object() 定义一个对象。并通过 对象.属性名 创建属性,并为属性赋值。

注意:new Object() 中的 new 关键字可以省略。

var obj = new Object(); //也可简写成 var obj = Object();
obj.name = "hh"; //为 obj 对象指定 name 属性,同时为该属性赋值为 hh。
alert(obj.age);

{} 形式

直接通过 {} 定义一个对象。相较于第一种方式,该种方式最为常用。

  1. 此种方法时,可以在 {} 内部以 属性名:属性值 形式定义属性。其中属性名可以加引号,也可以不加。

  2. {} 内部定义属性时,各个属性之间通过逗号隔开。

  3. 还可以通过 点语句 定义属性。

    var obj = {
        name:"fdafa", //直接定义属性
        'age':20 //属性之间通过逗号隔开,属性名可以加引号,也可以不加
    };
    obj.sex="男"; //也可以通过 点 语句定义属性。
    alert(obj.name+obj.age+obj.sex);
    
  4. 可以使用该种方式向一个函数中传递大量的参数。如普通方式

    function test(name,age,address,love){
        // do sth
    }
    test("name","age","address","love");
    

    调用 test 方法时,传递的参数顺序必须与定义时一致,否则会出现参数混乱。可按下面方式修改:

    function test(obj){
        alert(obj.name); // 使用时通过对象的属性进行引用。  
        alert(obj.love)
    }
    
    test({
        name:"name",
        age:'age',
        address:'address',
        love:'love'
    }); // 传递一个匿名对象,将各个要传递的值通过属性值传递到方法中
    

    这样在传参时,只需要传递一个匿名对象,而且定义对象属性时也非常的明了。

属性引用

有两种方式:

  1. 通过 点语句 引用指定的属性。

  2. 以数组的形式引用,[] 中必须是字符串。

    var obj = {
        name:"fdafa",
    };
    obj.sex="男";
    alert(obj.name+obj['sex']); //加号前通过点语句引用,加号后是通过数组形式引用
    
  3. 通过数组形式引用时,[] 中可以是变量,只不过在操作时,[] 中存在的是变量的值。

    var obj = {
        name:"fdafa-",
    };
    var p = 'name'
    alert(obj.name+obj[p]);
    

    虽然写的是 obj[p] ,但由于 p 是一个变量,其值为 'name',所以 obj[p] 完全等同于 obj['name']。

    这种写法结合 for in 语句可以完全遍历一个对象中的所有属性。

    var obj = {
        name:"fdafa",
        age:10
    };
    for(var p in obj){
        alert(p +"="+obj[p]);
    }
    

定义方法

方法名也是一个普通属性,它跟普通属性的定义方式一样。唯一区别在于:使用一个函数为该变量进行赋值。

  1. 将方法名当作一个普通的变量对待。

    var obj = {
        run:function(){
            return "run is obj.fun";
        } // run 是一个普通变量,用一个方法为其赋值,那么 run 就表示一个方法
        'test':function () {
            return "test";
        } // 跟属性定义时一样,test 也可以加引号,也可以不加
    };
    alert(obj.run());
    
    var o2 = new Object();
    o2.run = function(){
        return "run is o2.function"
    } // 通过 点语句 定义一个方法
    alert(o2.run())
    

删除属性

通过 delete 属性名 删除指定的属性。

var obj ={
    name:'fdsa'
}
alert(obj.name)
delete obj.name; //删除掉 obj 对象中的 name 属性
alert(obj.name);

实现 private 与 public 功能

在构造函数中,通过 this 定义的属性或方法,是 public 的,外界可以直接使用。而通过 var 定义的属性或方法却是在外界无法访问到。利用该特性,可以实现 getter 与 setter 类似的功能。

function Demo(){
    var age;
    this.setAge = function(age){
        this.age = age;
    }
    this.getAge = function(){
        return this.age;
    }
}

var d = new Demo()

d.setAge('aaa')
console.log(d.getAge())

外界对 age 的操作只能通过 getAge 和 setAge 进行。类似于 java bean 里面的 setter 与 getter 方法。

实现静态属性

所谓的静态属性就是所有对象共享的属性,一个对象修改了该属性的值,另一个对象的值也会随之改变。

(function(){
    var user
    Demo = function(value){ // Demo 前没有加 var,表示一个全局变量
        user = value;
        Demo.prototype.getUser = function() {
            return user
        };
    }
})()
var d = new Demo('first')
console.log(d.getUser())

var d2 = new Demo('second')
console.log(d.getUser())

都使用 d 对象进行输出,第一次输出 first,第二次输出 second。

由于 user 是匿名函数中的属性,所以每一次 new Demo() 时传递的值便会被共享。

constructor

每一个对象都有 constructor 属性,它指向该对象的构造函数

js 中没有类,普通函数与 new 关键字联合使用时,普通函数会转为构造函数,同时系统会创建一个该构造函数的实例对象。

function Demo(){
    
}

var d = new Demo()  // 与 new 关键字一起使用,Demo 便是一个构造函数,而 d 是该构造函数对应的实例
alert(d.constructor == Demo) // true

相关文章

  • 1.web前端基础储备之—js的面向对象风格以及原型和原型链

    javascript是面向对象风格,基于原型的语言。 目标:了解js面向对象和原型原型链的关系 面向对象(OOP)...

  • 面向对象:JavaScript

    面向对象 面向对象组成 this指向 第一个面向对象 第一个面向对象加强版 第一个面向对象(this) 原型 原型...

  • Javascript-高级篇之面向对象

    面向对象 基于原型的面向对象 基于原型的面向对象方式中,对象(object)则是依靠构造器(constructor...

  • lesson 5 面向对象及原型链 2021-04-29

    课程标题 面向对象及原型链 课程目标 面向对象思想 原型及原型链 继承 知识点 面向对象思想 原型链的指向 new...

  • 面向对象与原型(一)

    定义 有两种方式定义对象。 new Object() 形式 通过 new Object() 定义一个对象。并通过 ...

  • JavaScript之面向对象编程

    五、面向对象编程 目录:面向对象原型继承、面向对象class继承(ES6引入的) 1.面向对象原型继承 类:模板 ...

  • 面向对象与原型

    对象的原型 每个对象都含有原型的引用,当查找属性时,若对象本身不具有该属性,则会查找原型上是否有该属性。对象的原型...

  • 面向对象与原型

    ECMAScript有两种开发模式:1.函数式(过程化),2.面向对象(OOP)。面向对象的语言有一个标志,那就是...

  • JavaScript进阶知识点--JS面向对象

    面向对象 对代码的一种抽象,对外同一提供调用接口的编程思想 基于原型的面向对象 基于原型的面向对象方式中,对象(o...

  • 介绍js中的原型

    原型 编程语言对面向对象的实现主流的有两种方式:基于类的面向对象和基于原型的面向对象。 基于类的面向对象 典型的语...

网友评论

      本文标题:面向对象与原型(一)

      本文链接:https://www.haomeiwen.com/subject/xevpuxtx.html