ajax学習ノート1:オブジェクト向けjavascript
14534 ワード
『征服Ajax-Web 20開発技術詳細解試読版』第6章を読んでみるとよく書けていて、以下のようにまとめられています.原書の中にも自分の理解が増えている部分が多いです
1.配列ショートカットの作成
例:
上記の2つの配列を作成する効果は同じです.
2.四角カッコ([])を使用してオブジェクトのプロパティとメソッドを参照
構文:
方法一:オブジェクト名.属性(メソッド)名
方法2:オブジェクト名[プロパティ(メソッド)名]
区別:方式2に特殊文字を付けることができる
例:
3.カッコ({})構文を使用して、タイプのないオブジェクトを作成します(オブジェクトはクラスではありません)
構文:
{
property1:statement,
property2:statement2,
…,
propertyN:statmentN
}
例1:
に相当
上のオブジェクトに関連するクラスは匿名です
例2:
4.jsオブジェクトメンバーの4つの定義方法を明らかにすることは、jsを書くオブジェクト向けに役立つ
以下では、定義方法を例に挙げます.変数またはオブジェクトは類似しています.
プロトタイプの役割:prototypeは設計モードのプロトタイプと同じように、プロトタイプオブジェクトやメソッドを事前に作成し、必要に応じてコピーして使用し、まだ設計モードを見ることが分からない場合は
jsでのプロトタイプ処理方式ではprototypeはクラスのサブオブジェクトに属し、クラスを宣言するとプロトタイプが存在し、1部しか存在しない.オブジェクトを作成するとprototypeのすべてのメンバーが先にオブジェクトにコピーされるため、クラスのすべてのインスタンス化オブジェクトはプロトタイプのメンバーを得ることができ、同名のメンバーがある場合はインスタンスオブジェクトのメンバーを優先的に呼び出す
5.arguments関数のパラメータの集合ですが、Arrayオブジェクトではありません
例1:関数に渡される暗黙のパラメータ
例2:arguments.calleeは呼び出し関数自体を表す
6.関数のapply、callメソッド、lengthプロパティ
構文:
Function.prototype.apply(thisArg,argArray);//@1はオブジェクト@2はパラメータ配列(配列はより多くのパラメータを収容できる)
Function.prototype.call(thisArg[,arg1[,arg2…]]);//@1はオブジェクト@2はパラメータで複数可...
説明:prototypeメソッドがthis Argオブジェクトのメンバーに一時的にアクセスできるようにし、javaの内部クラス、c++のメンバーに相当するthisポインタ(this Argオブジェクトを指す)を変更しました.
例:
7.JavaScriptでfor(…in…)文で反射を実現
構文:
for(var p in obj){
//文
}
例:
8.クラスの継承
方式一:共有prototypeによる継承
この方法は親のメソッドを上書きするので、あまり適用されません.
方式二:反射メカニズムとprototypeを利用して継承を実現する
9.JavaScriptでインタフェースまたは抽象クラスを実装する
10.jsは構造関数を実現するとともに、インタフェースを実現する別の方法でもある.
11.イベント
1)単一イベント
2)グローバル変数をイベントに渡す
3)複数のイベントの登録
12.js実装ネーミングスペース(この例ではjsにおけるクラスの定義と呼び出しを同時に示す)
第七章を見てから書くつもりで、みんなと一緒に勉強したいです.
1.配列ショートカットの作成
例:
<script language="JavaScript" type="text/javascript">
<!--
var arr1 = new Array(1,2);//
var arr2 = [1,2];//
alert(arr1);
alert(arr2);
-->
</script>上記の2つの配列を作成する効果は同じです.
2.四角カッコ([])を使用してオブジェクトのプロパティとメソッドを参照
構文:
方法一:オブジェクト名.属性(メソッド)名
方法2:オブジェクト名[プロパティ(メソッド)名]
区別:方式2に特殊文字を付けることができる
例:
<script language="JavaScript" type="text/javascript">
<!--
Array arr=new Array();
//
arr["push"]("abc");
//
var len=arr["length"];// arr.length
//
alert(len);
-->
</script>3.カッコ({})構文を使用して、タイプのないオブジェクトを作成します(オブジェクトはクラスではありません)
構文:
{
property1:statement,
property2:statement2,
…,
propertyN:statmentN
}
例1:
<script language="JavaScript" type="text/javascript">
<!--
var obj = {
a:"11111",
print:function(){
alert(this.a);
}
};
obj.print();
-->
</script>に相当
<script language="JavaScript" type="text/javascript">
<!--
function Class1(){
this.a = "1111";
this.print = function(){
alert(this.a);
};
}
var obj = new Class1();
obj.print();
-->
</script>上のオブジェクトに関連するクラスは匿名です
例2:
<script language="JavaScript" type="text/javascript">
<!--
var objstyle = {
text-align:center,
background-color:#00CC00
}// css
-->
</script>4.jsオブジェクトメンバーの4つの定義方法を明らかにすることは、jsを書くオブジェクト向けに役立つ
以下では、定義方法を例に挙げます.変数またはオブジェクトは類似しています.
<script language="JavaScript" type="text/javascript">
<!--
function Class1(){
// ,
method = function(){
alert("private instance method");
}
//
this.method = function(){
alert("public instance method");
//
method();
}
}
//
Class1.method = function(){
alert("static method");
}
//
Class1.prototype.method = function(){
alert("prototype method");
}
var obj = new Class1();
obj.method();// ， prototype ， prototype
Class1.method();// ， " . " ， " . "
Class1.prototype.method();//
-->
</script>プロトタイプの役割:prototypeは設計モードのプロトタイプと同じように、プロトタイプオブジェクトやメソッドを事前に作成し、必要に応じてコピーして使用し、まだ設計モードを見ることが分からない場合は
jsでのプロトタイプ処理方式ではprototypeはクラスのサブオブジェクトに属し、クラスを宣言するとプロトタイプが存在し、1部しか存在しない.オブジェクトを作成するとprototypeのすべてのメンバーが先にオブジェクトにコピーされるため、クラスのすべてのインスタンス化オブジェクトはプロトタイプのメンバーを得ることができ、同名のメンバーがある場合はインスタンスオブジェクトのメンバーを優先的に呼び出す
5.arguments関数のパラメータの集合ですが、Arrayオブジェクトではありません
例1:関数に渡される暗黙のパラメータ
<script language="JavaScript" type="text/javascript">
<!--
function func(a,b){
alert(a);
alert(b);
for(var i=0;i<arguments.length;i++){
alert(arguments[i]);
}
}
func(1,2,3);// 1 2 3
-->
</script>例2:arguments.calleeは呼び出し関数自体を表す
<script language="JavaScript" type="text/javascript">
<!--
var sum=function(n){
if(1==n)return 1;
else return n+arguments.callee(n-1);// arguments.callee sum
}
alert(sum(100));
-->
</script>6.関数のapply、callメソッド、lengthプロパティ
構文:
Function.prototype.apply(thisArg,argArray);//@1はオブジェクト@2はパラメータ配列(配列はより多くのパラメータを収容できる)
Function.prototype.call(thisArg[,arg1[,arg2…]]);//@1はオブジェクト@2はパラメータで複数可...
説明:prototypeメソッドがthis Argオブジェクトのメンバーに一時的にアクセスできるようにし、javaの内部クラス、c++のメンバーに相当するthisポインタ(this Argオブジェクトを指す)を変更しました.
例:
<script language="JavaScript" type="text/javascript">
<!--
// func1， p A
function func1(){
this.p="func1-";
this.A=function(arg){
alert(this.p+arg);
}
}
// func2， p B
function func2(){
this.p="func2-";
this.B=function(arg){
alert(this.p+arg);
}
}
var obj1=new func1();
var obj2=new func2();
obj1.A.apply(obj2,["byA"]); // func2-byA， [“byA”] ，
obj2.B.apply(obj1,["byB"]); // func1-byB
obj1.A.call(obj2,"byA"); // func2-byA
obj2.B.call(obj1,"byB"); // func1-byB
//alert("last " + obj1.B("byB"));// B obj1 , , obj1 B
function sum(a,b){
return a+b;
}
alert(sum.length);// sum
-->
</script>7.JavaScriptでfor(…in…)文で反射を実現
構文:
for(var p in obj){
//文
}
例:
<script language="JavaScript" type="text/javascript">
<!--
setStyle({ color:#ffffff,backgroundColor:#ff0000,borderWidth:2px});
function setStyle(_style){
//
var element=getElement();//getElement html
// _style ， element.style
for(var p in _style){
element.style[p]=_style[p];
}
}
-->
</script>8.クラスの継承
方式一:共有prototypeによる継承
<script language="JavaScript" type="text/javascript">
<!--
function classParent(){
}
classParent.prototype.method1 = function(){
alert("classParent_method1");
}
classParent.prototype.method2 = function(){
alert("classParent_method2");
}
function classChild(){
}
classChild.prototype = classParent.prototype;
classChild.prototype.methodNew = function(){
alert("classChild_methodNew");
}
classChild.prototype.method2 = function(){
alert("classChild_method2");
}
var obj = new classChild();
obj.method1();// classParent_method1
obj.method2();// classChild_method2
obj.methodNew();// classChild_methodNew
var objParent = new classParent();
objParent.method2();// classChild_method2,
-->
</script>この方法は親のメソッドを上書きするので、あまり適用されません.
方式二:反射メカニズムとprototypeを利用して継承を実現する
<script language="JavaScript" type="text/javascript">
<!--
// inherit
Function.prototype.inherit = function(baseClass){
for(var p in baseClass.prototype){
this.prototype[p]=baseClass.prototype[p];
}
}
function classParent(){
}
classParent.prototype = {
method1:function(){
alert("classParent_method1");
},
method2:function(){
alert("classParent_method2");
}
}
function classChild(){
}
classChild.inherit(classParent);
classChild.prototype.methodNew=function(){
alert("classChild_methodNew");
};
classChild.prototype.method2=function(){
alert("classChild_method2");
};
var obj = new classChild();
obj.method1();// classParent_method1
obj.method2();// classChild_method2
obj.methodNew();// classChild_methodNew
var objParent = new classParent();
objParent.method2();// classParent_method2,
-->
</script>9.JavaScriptでインタフェースまたは抽象クラスを実装する
<script language="JavaScript" type="text/javascript">
<!--
Function.prototype.inherit = function(baseClass){
for(var p in baseClass.prototype){
this.prototype[p]=baseClass.prototype[p];
}
}
function Class1(){
}
Class1.prototype = {
method:undefined//
};
function class2(){}
class2.inherit(Class1);
class2.prototype.method = function(){alert("has been implimented");};//
var obj = new class2();
obj.method();//
-->
</script>10.jsは構造関数を実現するとともに、インタフェースを実現する別の方法でもある.
<script language="JavaScript" type="text/javascript">
<!--
//Class ， create，
var Class = {
create: function() {
return function() {
this.initialize.apply(this, arguments);
}
}
}
var class1=Class.create();
class1.prototype={
initialize:function(userName){
alert("hello,"+userName);
}
}
var obj = new class1("dd");//initialize
-->
</script>11.イベント
1)単一イベント
<script language="JavaScript" type="text/javascript">
<!--
function Class1(){
this.text = "";
}
Class1.prototype = {
setText:function(text){
this.text = text;
this.OnTextChange(this.text);
},
OnTextChange:function(text){
}//
}
var obj = new Class1();
obj.setText("text init");//
//alert(obj.text);
obj.OnTextChange = function(text){//
alert(text);
}
obj.setText("Text Chanaged");// "Text Chanaged"
-->
</script>2)グローバル変数をイベントに渡す
<script language="JavaScript" type="text/javascript">
<!--
function Class1(){
this.text = "";
}
Class1.prototype = {
setText:function(text){
this.text = text;
this.OnTextChange(this.text);
},
OnTextChange:function(text){
}//
}
// function
function createFunction(obj,strFunc){
var args=[];
if(!obj)obj=window;
for(var i=2;i<arguments.length;i++)
args.push(arguments[i]);
return function(){
obj[strFunc].apply(obj,args);
}
}
var obj = new Class1();
function OnTextChangeHandle(text){//
alert(text);
}
var globalparams = "global params";
obj.OnTextChange = createFunction(null,"OnTextChangeHandle",globalparams);//
obj.setText("Text Chanaged");// "global params"
-->
</script>3)複数のイベントの登録
<script language="JavaScript" type="text/javascript">
<!--
function Class1(){
this.text = "";
}
Class1.prototype = {
OnTextChange:[],//
setText:function(text){
this.text = text;
// OnTextChange
for(var i = 0;i < this.OnTextChange.length;i++){
this.OnTextChange[i](this.text);
}
},
addOnTextChangeListener:function(_event){//
//
for(var i = 0;i < this.OnTextChange.length;i++){
if(_event == this.OnTextChange[i]){
return;
}
}
this.OnTextChange.push(_event);
},
removeOnTextChangeListener:function(_event){//
var arr = [];
for(var i = 0;i < this.OnTextChange.length;i++){
if(_event != this.OnTextChange[i]){
arr.push(this.OnTextChange[i]);
}
}
this.OnTextChange = arr;
}
}
var obj = new Class1();
function MyOnTextChange1(text){
alert("MyOnTextChange1:"+text);
}
function MyOnTextChange2(text){
alert("MyOnTextChange2:"+text);
}
obj.addOnTextChangeListener(MyOnTextChange1);
obj.addOnTextChangeListener(MyOnTextChange1);//
obj.addOnTextChangeListener(MyOnTextChange2);
obj.setText("Text Chanaged 1");
obj.removeOnTextChangeListener(MyOnTextChange2);
obj.setText("Text Chanaged 2");
-->
</script>
12.js実装ネーミングスペース(この例ではjsにおけるクラスの定義と呼び出しを同時に示す)
<script language="JavaScript" type="text/javascript">
<!--
//
var com = new Object();// new
if(com.briup == undefined){//
com.briup = new Object();
}
com.briup.Class1 = function(){
this.a = 10;
};
com.briup.Class1.prototype = {
print:function(){
alert(this.a);
}
};
if(com.briup == undefined){
com.briup = new Object();
}
if(com.briup.hrtc == undefined){
com.briup.hrtc = new Object();
}
com.briup.hrtc.Class2 = function(){
this.b = 20;
};
com.briup.hrtc.Class2.prototype = {
print:function(){
alert(this.b);
}
};
//
var obj1 = new com.briup.Class1();
obj1.print();
var obj2 = new com.briup.hrtc.Class2();
obj2.print();
-->
</script>
第七章を見てから書くつもりで、みんなと一緒に勉強したいです.