Javascript面对对象. 第三篇

3.字面量

为了让属性和方法很好的体现封装的效果,并且减少不必要的输入原型的创建可以使用字面量.

 function Box(){}
    //使用字面量的方法创建原型对象,这里的{}就是对象,是Object,new Object就是相当于{}
    Box.prototype={
        name:‘link‘,
        age:23,
        run:function(){
            return this.name+this.age+‘运行中。。。‘
        }
    };
    var box=new Box();
    alert(box.run());

使用构造函数创建原型对象和使用字面量创建对象在使用上基本相同,但是还是有一些区别,

字面量创建的方式使用constructor属性不会指向实例,而会指向OBject,构造创建的方式则相反。

字面量创建对象

function Box(){}
    //使用字面量的方法创建原型对象,这里的{}就是对象,是Object,new Object就是相当于{}
    Box.prototype={
        name:‘link‘,
        age:23,
        run:function(){
            return this.name+this.age+‘运行中。。。‘
        }
    };
    var box=new Box();
    alert(box.run());
    alert(box.constructor)   //就是Object方法,因为{}就是对象,是Object,new Object就是相当于{}

构造函数创建原型对象

 function Box(){}  //构造函数函数体里面就是什么都没有,这里如果有,就叫实例属性,实例方法。

   Box.prototype.name=‘link‘;
   Box.prototype.age=‘23‘;
   Box.prototype.run=function(){
       return this.name+this.age+"运行中。。。"
   }
   var box=new Box();
   alert(box.constructor);//就是Box方法。

如果字面量想Object转换Box可以用

function Box(){}
    //使用字面量的方法创建原型对象,这里的{}就是对象,是Object,new Object就是相当于{}
    Box.prototype={
        constructor:Box,  //直接强制指向Box
        name:‘link‘,
        age:23,
        run:function(){
            return this.name+this.age+‘运行中。。。‘
        }
    };
    var box=new Box();
    alert(box.run());
    alert(box.constructor)   //就是Box方法。

原型对象不仅仅可以在自定义对象的情况下使用,而ECMAScript内置的引用类型都可以使用这种方式,并且内置的引用类型本身也使用了原型。

//数组排序
    var lis=[1,2,15,5,55,33,0]
    alert(lis.sort())

    //查看sort是不是Array原型对象里的方法
    alert(Array.prototype.sort)
    alert(String.prototype.substring)

    //添加新方法
    String.prototype.addString=function(){
        return this+‘新方法‘;
    }
    var box=‘link‘
    //输出link新方法
    document.write(box.addString())

PS:尽管给原生的内置引用类型添加方法使用起来很方便,但是我们不推荐使用这种分,因为它可能会导致命名冲突,不利于代码的维护性.

时间: 2024-08-27 03:32:11

Javascript面对对象. 第三篇的相关文章

javascript面对对象编程 之继承

上一篇博客中为大家介绍了javascript面向对象编程原则的封装,今天为大家介绍继承,在javascript中没有类的概念,所有不能像c#,java语言那样,直接的用类去继承类.比如现在有比如,现在有一个"动物"对象的构造函数. function Animal(){ this.species = "动物"; } 还有一个"猫"对象的构造函数. function Cat(name,color){ this.name = name; this.co

深入理解javascript函数系列第三篇

前面的话 函数是javascript中特殊的对象,可以拥有属性和方法,就像普通的对象拥有属性和方法一样.甚至可以用Function()构造函数来创建新的函数对象.本文是深入理解javascript函数系列第三篇--属性和方法 属性 [length属性] 函数系列第二篇中介绍过,arguments对象的length属性表示实参个数,而函数的length属性则表示形参个数 function add(x,y){ console.log(arguments.length)//3 console.log(

javascript面向对象系列第三篇——实现继承的3种形式

前面的话 学习如何创建对象是理解面向对象编程的第一步,第二步是理解继承.开宗明义,继承是指在原有对象的基础上,略作修改,得到一个新的对象.javascript主要包括类式继承.原型继承和拷贝继承这三种继承方式.本文是javascript面向对象系列第三篇——实现继承的3种形式 类式继承 大多数面向对象的编程语言都支持类和类继承的特性,而JS却不支持这些特性,只能通过其他方法定义并关联多个相似的对象,如new和instanceof.不过在后来的ES6中新增了一些元素,比如class关键字,但这并不

深入理解javascript作用域系列第三篇

前面的话 一般认为,javascript代码在执行时是由上到下一行一行执行的.但实际上这并不完全正确,主要是因为声明提升的存在.本文是深入理解javascript作用域系列第三篇--声明提升(hoisting) 变量声明提升 a = 2 ; var a; console.log( a ); 直觉上,会认为是undefined,因为var a声明在a = 2;之后,可能变量被重新赋值了,因为会被赋予默认值undefined.但是,真正的输出结果是2 console.log( a ) ; var a

深入理解javascript作用域系列第三篇——声明提升(hoisting)

× 目录 [1]变量 [2]函数 [3]优先 前面的话 一般认为,javascript代码在执行时是由上到下一行一行执行的.但实际上这并不完全正确,主要是因为声明提升的存在.本文是深入理解javascript作用域系列第三篇——声明提升(hoisting) 变量声明提升 a = 2 ; var a; console.log( a ); 直觉上,会认为是undefined,因为var a声明在a = 2;之后,可能变量被重新赋值了,因为会被赋予默认值undefined.但是,真正的输出结果是2 c

Javascript面对对象. 第一篇

Javascript,有两个种开发模式: 1.函数式(过程化)2.面对对象(oop),面对对象语言有一个标志,就是类,而通过类可以创建任何多个属性和方法,而Ecmascript没有类的概念,因此它的对象也与基于类的语言中的对象有所不同. 1.创建对象 创建一个对象,然后给这个对象新建属性和方法. var box=new Object();//创建对象 box.name='link'; //添加属性,值 box.age=45; box.run=function(){//创建方法 return th

javascript生成对象的三种方法

/** js生成对象的三种方法*/ // 1.通过new Object,然后添加属性 示例如下: var people1 = new Object(); people1.name = 'xiaohailong01'; people1.age = 31; alert("name:" + people1.name + ", age:" + people1.age); // 2.直接接收json数据生成 var people2 = { name : 'xiaohailon

javascript运动系列第三篇——曲线运动

× 目录 [1]圆周运动 [2]钟摆运动 [3]抛物线运动 前面的话 上一篇介绍了变速运动,但只实现了直线运动.如果元素的left和top同时运动,并遵循不同的曲线公式,则会进行不同形式的曲线运动.本文将详细介绍圆周运动.钟摆运动和抛物线运动这三种曲线运动形式 圆周运动 圆周运动可能是最好理解的曲线运动了 若(x0,y0)为圆心,则圆的公式为(x-x0)*(x-x0) + (y-y0)*(y-y0) = r*r 写成三角函数的形式为 x = x0 + cosa*r y = y0 + sina*r

javascript 显示对象的三种方法

以前发了个调试javascript时显示复杂对象的方法,有同学说为什么不用JSON.stringify(obj) 呢,有同学说用console.log(obj),为搞清楚这个问题,我试验了下这3个方法并做了比较,比较结果见图,代码在下面. 有几点说明下:1.从 ECMAScript 5th Edition 开始,JavaScript 内建了 JSON 对象,不用引js文件.2.alert(JSON.stringify(window)),会报TypeError: cyclic object val