สรุปพื้นฐานของ JavaScript (เชิงวัตถุ)

javascript การเรียนรู้

javascript สามารถแบ่งคร่าวๆ ได้เป็น 3 ส่วนที่แตกต่างกัน: Core (ECMAscript), Text Object (DOM), Browser Object (BOM)

Core (ECMAscript): Keywords, Statements, Operators, Object

Text Object (DOM) : DOM จะวางแผน ทั้งหน้าลงในเอกสารที่ประกอบด้วยระดับโหนด
การแยกวิเคราะห์เป็นไปตามมาตรฐาน W3C html dom:
การอ้างอิง W3C ให้ความสนใจเป็นพิเศษกับ

วัตถุเบราว์เซอร์ BOM คำอธิบายโหนด DOM คุกกี้ป๊อปอัปเบราว์เซอร์ใหม่ ขนาดการตั้งค่าเบราว์เซอร์

อ็อบเจ็กต์ในตัว Core (ECMAscript) ทั่วโลก;
วิธีการ: parseInt(), isNan(), encodeURI()...ฯลฯ ล้วนเป็นวิธีการของอ็อบเจ็กต์นี้
ให้ความสนใจเป็นพิเศษกับ eval(); สัญลักษณ์ของภาษาไดนามิก เช่น: eval("alert('hi')"); แต่วิธีนี้แย่มาก (ด้านความปลอดภัย)
คำอธิบายวัตถุข้อความ (DOM):

<bookstore> <book category="cooking"> <title lang="en">ภาษาอิตาลีทุกวัน</title> <author>Giada De Laurentiis</author> <year>2005</year> <price>30.00</price > </หนังสือ> </ร้านหนังสือ>

1. พื้นฐาน ECMAscript

$ ประเภทอ่อนของตัวแปร; การกำหนดประเภทฮังการี: var iOuouValue=100;

$ สามารถจบบรรทัดโดยมีหรือไม่มีอัฒภาค; แต่จากนั้น onsubmit="javascript:function();return false;

$ ความสนใจเป็นพิเศษ;

"typeof" var test=1; alert(typeof testX); //output "unknown"

"NaN" - ไม่ใช่ตัวเลข -> isNan("blue"); //output "true" ->isNan("123") ; // เอาต์พุต "เท็จ"

$ object; var o = วัตถุใหม่ ();

ที่

เรามักจะเขียนคือวัตถุ

var a = {name:"Liu Kaiyi"} เทียบเท่ากับ var a = function(){this.name="Liu Kaiyi"};

ชื่อ: "test" ,pass:"123456",addr:"bj"} //นี่คืออะไร? - json.json

เมื่อ var str = '{name:"test",pass:"123456",addr:"bj"}'

var objectBean = eval(str); //นี่คือวัตถุ objectBea.name โดยใช้

แนวคิดโดเมน:

<SCRIPT type = ข้อความ/จาวาสคริปต์>
var sMessage = 'สวัสดี';
ฟังก์ชั่น setSomething() {
sColor = 'สีแดง';
sMessage = 'สวัสดีชาวโลก!';
-
setSomething();
alert(sMessage); //สวัสดีชาวโลก!
การแจ้งเตือน (sColor); //red
</SCRIPT> <SCRIPT type=text/javascript>
var sMessage = 'สวัสดี';
ฟังก์ชั่น setSomething() {
var sColor = 'สีแดง';
sMessage = 'สวัสดีชาวโลก!';
-
setSomething();
alert(sMessage); //สวัสดีชาวโลก!
alert(sColor); // ไม่มีอะไร
</SCRIPT>

<SCRIPT type=text/javascript>
var sMessage = 'สวัสดี';
ฟังก์ชั่น setSomething() {
var sColor = 'สีแดง';
var sMessage = 'สวัสดีชาวโลก!';
-
setSomething();
alert(sMessage); //สวัสดี
alert(sColor); // ไม่มีอะไร
</สคริปต์>

การวางรากฐานสำหรับเชิงวัตถุ: การประยุกต์ใช้วัตถุประเภทต้นแบบ อ้างอิงถึง

// มรดกที่ง่ายที่สุด
Object.prototype.inObj = 1;

ฟังก์ชัน A()
-
นี่.inA = 2;
-

A.ต้นแบบ.inAProto = 3;

B.prototype = new A; // เชื่อมต่อ A เข้ากับห่วงโซ่ต้นแบบของ B
B.prototype.constructor = B;
ฟังก์ชัน B()
-
นี่.inB = 4;
-

B.prototype.inBProto = 5;

x = B ใหม่;
document.write(x.inObj + ', ' + x.inA + ', ' + x.inAProto + ', ' + x.inB + ', ' + x.inBProto);

//1, 2, 3, 4 , 5
//เพิ่มความมั่นใจ http://www.json.org/json.js

Object.prototype.toJSONString = function (filter) { return JSON.stringify(this, filter); }; ไม่ใช่เหรอ?

$ อาร์กิวเมนต์ ;

ฟังก์ชั่น getFun(){alert(arguments.length);} ;

getFun("xx") // เอาต์พุต 1

getFun ("xx",23) // เอาต์พุต 2

$ คำสั่ง; ภายใต้คำแนะนำพิเศษ for

(var i=0i<iCount;i++) หรือ for(attr in object);

ถ้าเบื่อก็ for( sProp in window ){alert(sProp+"Hey, please!");} //ดูภาพสะท้อนของ javascript

เชิงวัตถุ:

var bean = new Bean();

1.ฟังก์ชันเมธอดโรงงาน

getAttr(){

alert(this.attr)

}

function Bean(tattr){

var bean = วัตถุใหม่;

bean.attr = tattr;

bean.getAttr = getAttr

;

}

โดยพื้นฐานแล้วมันเป็นเวอร์ชันเลียนแบบของเชิงวัตถุ

2. สร้าง

ฟังก์ชัน Bean(tattr){

this.attr = tattr;

bean.getAttr = function(){

alert(this.attr);

}

}

ด้านบน 2 เมื่อวัตถุ Bean ถูกสร้างขึ้น เมธอดจะ "สร้างฟังก์ชันซ้ำๆ "!

3. ฟังก์ชั่นโหมดต้นแบบ

Bean(){}

Bean.prototype.attr = "";

Bean.prototype.getAttr=function(){alert(this.attr);}

แก้ปัญหา "ฟังก์ชันที่สร้างซ้ำ" แต่ปัญหาใหม่ Bean.prototype.getArray = new Array();

วัตถุใหม่ bean1 และ bean2 จะแชร์พื้นที่ Array ใหม่ (ซึ่งเราไม่ต้องการเห็น)

4. แบบผสม :) ฮ่าฮ่า

ฟังก์ชั่น Bean(){

this.attr= "";

this.getArray=อาร์เรย์ใหม่;

}

Bean.prototype.getAttr=function(){alert(this.attr);}

5. ต้นแบบไดนามิก (โปรดทราบว่าจากนี้ไป จะเป็นเชิงวัตถุอย่างแท้จริง!!!)

function Bean(){

this.attr= "";
this.getArray=new Array;

//classload เมื่อโหลด

if(typeof Bean._initialized == "ไม่ได้กำหนด" ){

Bean.prototype.getAttr=function(){alert(this.attr);};

Bean._initialized= จริง

;

-

/************************************************* ***** ***************/

การสืบทอดวัตถุ

1. การแอบอ้างบุคคลอื่น! - (สามารถรองรับการสืบทอดได้หลายแบบ copycat มีประสิทธิภาพมาก)

ฟังก์ชั่น classA (sstr) {

this.color = sstr;

this.sayColor = function () {

การแจ้งเตือน (this.color);

-

}

ฟังก์ชันคลาส C(){}

ฟังก์ชั่น classB(){

this.newMethod =ClassA;

this.newMethod();

ลบ this.newMethod;

this.newMethod = ClassC ;

ลบ this.newMethod

;

this.arrt = "กูเกิล";

-

2.call() Apply() ก็ลอกเลียนแบบเช่นกัน

function classA(sstr){

this.color = sstr;

this.sayColor = function(str){

alert(str+this.color);

-

-

ฟังก์ชั่น classB(){

// this.newMethod =ClassA ;

// this.newMethod();

// ลบ this.newMethod ;

classA.call(this,"red");

//classA.apply(this,newMethod( "สีแดง"))

this.arrt = "ไป่ตู้";

-

3. ห่วงโซ่ต้นแบบการสืบทอดดั้งเดิม (แต่ไม่รองรับการสืบทอดหลายรายการ)
ฟังก์ชั่น classA(){this.oo="test";}
classA.prototype.color = "สีแดง";
ฟังก์ชันคลาสB(){}
classB.prototype = คลาส A ใหม่;
classB.prototype.sayName = ฟังก์ชั่น(){
การแจ้งเตือน( this.color );
-
varbb = คลาส B ใหม่;
bb.sayName(); // เอาต์พุตเป็นสีแดง
การแจ้งเตือน (bb.oo); // การแจ้งเตือนการทดสอบเอาต์พุต

(bb instanceof classA); // เอาต์พุตจริง
การแจ้งเตือน (อินสแตนซ์ bb ของคลาส B); // เอาต์พุตเป็นจริง
4. หากคุณต้องการมรดกเพิ่ม! - และยังรองรับ instanceof
วิธีการผสม:
ฟังก์ชันคลาส A(){}
ฟังก์ชันคลาสB(){}
ฟังก์ชั่นคลาส C(){
classA.call (นี้);
classC.call (นี้);
-
classC.prototype = new classA;//โปรดทราบว่า instanceof ใช้ได้กับ A เท่านั้น