再践javascript对象、原型、属性、构造函数、扩展、json

时间:2021-06-01 14:38:40
javascript中的对象有三种 
1、基于内部对象
如Array、Boolean、Data、Math、Number、Object、RegExp、String对象等
这些对象系统给我们提供了各自的属性与方法供调用。

2、基于类的对象
用类的方式实现对象的引用,这些类需要我们自己定义

3、基于原型的对象
提供有关如何使用 javascript 基于原型的对象模型的指南,并且提供指向特定信息的链接,这些信息描述基于原型的对象的自定义构造函数和继承。
/*
javascript内置对象上添加其它属性或者方法
*/
String.prototype.good
=function(){//自定义方法
return "追加good方法";
}
String.prototype.bad
="追加bad属性";//自定义属性

var str="";//定义一个字符串实例str,调用String对象追加的属性和方法
document.write(str.good());
document.write(str.bad);

自定义对象
语法规则
1、对象创建方式
1)、对象初始化器方式
格式:objectName
= {property1:value1, property2:value2,…, propertyN:valueN}
property是对象的属性
value则是对象的值,值可以是字符串、数字或对象三者之一
示例代码:
var user={name:"Sn",age:25};

2)、构造函数方式
编写一个构造函数,并通过new方式来创建对象,构造函数本可以带有构造参数
示例代码:
function f(name,age){
this.name=name;
this.age=age;
}
var use=new f();

C#定义:构造函数
1、构造函数的命名必须和类名完全相同;
2、构造函数的功能主要用于在类的对象创建时定义初始化的状态,它没有返回值,也不能用void来修饰;
3、构造函数不能被直接调用,必须通过new运算符在创建对象时才会自动调用,一般方法在程序执行到它的时候被调用;
4、当定义一个类的时候,通常情况下都会显示该类的构造函数,并在函数中指定初始化的工作也可省略;
5、当一个类只定义了私有(private)的构造函数,将无法通过new关键字来创建其对象(不可访问,因为它受保护级别限制);
当一个类没有定义任何构造函数,C#编译器会为其自动生成一个默认的无参的构造函数;除非类是static类;

javascript定义:构造函数
javascript中的构造函数是允许有返回值的,但通常不设置返回值
如果一个构造函数有一个返回值,则返回的对象成为new表达式的值。在此情况下,作为this的对象将会被抛弃。
构造函数作用:
使自己的对象多次复制,同时实例根据设置的访问等级可以访问其内部的属性和方法
当对象被实例化后,构造函数会立即执行它所包含的任何代码
/*
函数定义
函数是由这样的方式进行声明的:关键字 function、函数名、一组参数,以及置于括号中的待执行代码。
函数的构造语法有这三种:
1.function functionName(arg0, arg1, ... argN) { statements } //function语句
2.var function_name = new Function(arg1, arg2, ..., argN, function_body);//Function()构造函数
3.var func = function(arg0, arg1, ... argN) { statements }; //函数直接量
示例代码:
*/
function fn(x){return x*x}; //1.function语句
var Fnc = new Function("x","return x*x;"); //2.Function()构造函数
var fact = function(x){return x*x;}; //3.函数直接量、匿名函数、表达式

document.write(fn(
10)); //显示 100
document.write(Fnc(10)); //显示 100
document.write(fact(10));//显示 100
/*

注:如果函数无明确的返回值,或调用了没有参数的 return 语句,那么它真正返回的值是 undefined。
*/
/*
Function()构造函数
函数实际上是功能完整的对象 。Function类可以表示开发者定义的任何函数。用Function类直接创建函数的语法如下:
var function_name = new function(arg1, arg2, ..., argN, function_body)
在上面的形式中,每个arg都是一个参数,最后一个参数是函数主体(要执行的代码)。这些参数必须是字符串。
示例代码:
*/
var f = new Function("x","x*x;");
document.write(f(
10)); //显示:100
document.write(f); //显示:function anonymous(x) { return x*x; } 匿名(anonymous)

document.write(f(
10)); //undefined
document.write(f); //显示:function anonymous(x) { x*x; }

/*
注意:尽管可以使用 Function 构造函数创建函数,但最好不要使用它,因为用它定义函数比用传统方式要慢得多。不过,所有函数都应看作 Function 类的实例 。
如果你定义的函数没有参数,那么可以只需给构造函数传递一个字符串(即函数的主体)即可。
注意:传递给构造函数Function()的参数中没有一个用于说明它要创建的函数名。用Function()构造函数创建的未命名函数有时被称为“匿名函数”。
Function()函数允许我们动态地建立和编译一个函数,它不会将我们限制在function语句预编译的函数体中。
*/
/*
函数直接量
函数直接量是一个表达式,它可以定义匿名函数。函数直接量的语法和function语句非常相似,只不过它被用作表达式,而不是用作语句,而且也无需指定函数名。
语法:
var func = function(arg0, arg1, ... argN) { statements };//函数直接量
虽然函数直接量创建的是未命名函数,但是它的语法也规定它可以指定函数名,这在编写调用自身的递归函数时非常有用。
示例代码:
*/
var f = function fact(x) {
if (x <= 1)
return 1;
else
return x * fact(x - 1);
};
document.write(f(
10));//显示:随机数,因为返回值小于0
/*

注:它并没有真正创建一个名为fact()函数,只是允许函数体用这个名字来引用自身。
函数名并没有什么实质意义,它不过是用来保存函数的变量名字,这个变量只是保存的位置可能不一样而已,可以将这个函数赋给其他变量,它仍然会以相同方式起作用。
*/
/*
Function()构造函数和函数直接量差别
Function()构造函数和函数直接量之间的差别有一点就是:使用构造函数Function()创建的函数不使用词法作用域,相反的,它们总是被*函数来编译,如:
示例代码:
*/
var y = "global";
function constructFunction() {
var y = "local";
return new Function("return y;");//Function()构造函数,不使用局部作用域
}
function constFunction() {
var y = "local";
var f = function () { //函数直接量,使用局部作用域
return y;
};
return f;
}
document.write(constructFunction()());
//显示 global,因为Function()构造函数返回的函数并不使用局部作用域
document.write(constFunction()()); //显示 lobal,因为函数直接量返回的函数并使用局部作用域
/*

注:它并没有真正创建一个名为fact()函数,只是允许函数体用这个名字来引用自身。
函数名并没有什么实质意义,它不过是用来保存函数的变量名字,这个变量只是保存的位置可能不一样而已,可以将这个函数赋给其他变量,它仍然会以相同方式起作用。
*/
/*
javascript中的构造函数是允许有返回值的,但通常不设置返回值
如果一个构造函数有一个返回值,则返回的对象成为new表达式的值。在此情况下,作为this的对象将会被抛弃。
*/
function定义构造函数
function f(x){
this.x = x;
}
document.write(f(
10));//显示:10

var o=new f(10);
document.write(o.x);
//显示:10
/*


javascript对象{}
//定义对象语法
var object={};
//对象内的属性语法(属性名(property)与属性值(value)是成对出现的)
object.property=value;
//对象内的函数语法(函数名(func)与函数内容是成对出现的)
object.func=function(){...;};
示例代码:
*/
var object={};
object.property
='value';
object.func
=function(){return 'fn'};

document.write(object.property);
//显示:value
document.write(object.constructor); //显示:function Object() { [native code] }
document.write(object.func.constructor); //显示:function Function() { [native code] }

/*
javascrip原型(prototype)与属性(property)
prototype是构造函数的一个属性,该属性指向一个对象,对象原型的属性在所有的实例中找到。
//定义对象语法
obj.prototype={};
示例代码:
*/
var object={};
object.func
=function(){return 'fn'};
object.func.prototype
={
prop:
'属性值'
};
object.func.prototype.newsprop
={
prop:
'再动态添加新的属性'
};
object.func.prototype.newsfn
=function(){
return '再动态添加新的方法'
};

document.write(
new object.func().prop); //显示:属性值
document.write(new object.func().newsprop.prop);//显示:再动态添加新的属性
document.write(new object.func().newsfn()); //显示:再动态添加新的方法
/*

注:一定要实例new
当然原型与属性名跟函数名一样并没有什么实质意义,它不过是用来保存函数的变量名字,这个变量只是保存的位置可能不一样而已,可以将这个函数赋给其他变量,它仍然会以相同方式起作用。
*/

this.特权(属性和方法)、prototype.公有(属性和方法)、function.(属性和方法)
<script type="text/javascript">
function f(x){
this.public_v = x; //特权属性(公有属性),只有在被实例化后的实例中可调用,即:new f().x
var private_v; //私有属性,只能在构造函数内部可调用
var new_f = this; //this为当前执行的对象,即:new_f=this=new f();
function private_fn(){ //私有方法,调用实例对象的属性值,即:get_x=new f().x;
return new_f.x;
}
this.publice_fn = function(){ //特权方法(公有方法),只有在被实例化后的实例中可调用
return x; //在公有方法中可以访问私有成员和公有属性和方法
}
}

f.prototype.prototype_f
= function(){ //公有方法,必须通过new关键字实例化,
//向prototype中添加成员将会把新方法添加到构造函数的底层中去
return '由prototype添加的成员!';
}

f.static_p
= '静态属性'; //静态属性,不能用于new,适用于对象的特殊实例,就是作为Function对象实例的构造函数本身
f.static_f = function(){ //静态方法,不能用于new
return '静态方法';
}

var o=new f(10); //new 实例化

document.write(o.public_v
+'\n'); //显示:10
document.write(o.publice_fn()+'\n'); //显示:10
document.write(o.prototype_f()+'\n'); //显示:由prototype添加的成员!

document.write(f.static_p);
//显示:静态属性
document.write(f.static_f()+'\n'); //显示:静态方法
/*

注:
在无实例的情况下,this.特权(属性和方法)、prototype.公有(属性和方法)、function.(属性和方法)三者之间互不能调用
(特权)私有和(特权)公有成员在函数的内部,在构造函数创建的每个实例中都会包含同样的私有和公有成员的副本,
因而实例越多占用的内存越多
*/

js面向对象设计用{}好还是function(){}好(构造函数)
{}可以算做一个单例(单例模式)
function(){} 这种返回一个对象。每次都NEW的时候返回都是一个不同的对象!
上面有同学也说了 {} 更效率了。而且不用new。{} 全局固定,可任意扩展。
一般来说{}确实效率高,使用简单随意,不过不想暴漏某些方法时候用
function 更好

javascript解析JSON
一、JSON(javascript Object Notation) 是一种轻量级的数据交换格式,JSON是javascript语法的一个子集,javascript中{}代表一个对象, []代表一个数组,调用的语法跟javascript里的{}、[]一样。

JSON建构于两种结构:
1、值的有序列表,数组json([{"name":"value"}])。
2、值的有无序列表,({"name":"value"})。

JSON具有以下这些形式:
1、JSON对象是一个无序的“‘名称/值’对”集合。一个对象以“{”(左括号)开始,“}”(右括号)结束。每个“名称”后跟一个“:”(冒号);“‘名称/值’ 对”之间使用“,”(逗号)分隔。

2、数组是值(value)的有序集合。一个数组以“[”(左中括号)开始,“]”(右中括号)结束。值之间使用“,”(逗号)分隔。

3、值(value)可以是双引号(不可以是单引号)括起来的字符串(string)、数值(number)、truefalsenull、对象(object)或者数组(array)。这些结构可以嵌套。

4、字符串(string)是由双引号包围的任意数量Unicode字符的集合,使用反斜线转义。一个字符(character)即一个单独的字符串(character string)。

JSON文件格式和JSON文件注释
JSON文件格式,后缀名为.json。JSON本身就是为了压缩文本,所以不能在JSON文件里加注释。

javascript和json.js一起使用的细节
1、JSON写法与JSON转为{}对象
JSON写法
正确写法:{
"name":"value"}
错误写法:{
'name':'value'}

JSON转为{}对象,借助json.js转换。
正确写法:
var obj='{"name":"value"}';
错误写法:
var obj="{"name":"value"}"; }";

对象{}与json转换示例代码json.js:
<script src=
"/js/jquery.js" type="text/javascript"></script>
<script src="/js/json.js" type="text/javascript"></script>

示例使用JSON.parse将字符串转为json对象
<script type="text/javascript">
var jsonText = '{"name":"sn","age":"25"}';//注意:单引号写在{}外,每个属性名都必须用双引号。
var jsonObj=JSON.parse(str); //把字符串转为json对象
document.write (jsonObj.name); //显示:sn
</script>

示例使用JSON.stringify将json对象转为字符串
<script type="text/javascript">
var o = {
name :
'sn',
age :
25
};
var jsonText = JSON.stringify(o); //把json对象转为字符串
document.write(jsonText); //显示:'{"name":"sn","age":"25"}'
</script>

 

 文档下载地址:点击下载