天天看點

微信小遊戲--JS基礎

配置Node.js環境:

1.下載下傳64位Node.js

2.打開CMD查詢是否安裝成功或者版本号 node  -v

=======================================

IDE :subline

=======================================

檔案夾隐藏擴充名=》在檔案名選項修改或者勾選檔案擴充名

設定預設編輯器=》選擇打開方式修改

===========================================

可以解析執行js:node,浏覽器(腳本語言隻有解析,不用編譯)

node解析步驟:

1書寫js檔案

2在js檔案的檔案夾内 shift+右鍵=》window PowerShell

3輸入dir檢視js資訊

4輸入node   main.js  點Tab自動補齊

注意 :儲存檔案并且js語句開頭要小寫

注釋://   多行注釋

win10編輯卡頓 =》右鍵屬性,取消快速編輯

windos PowerShell 指令緩存=》 上下鍵

==========================================

變量 :自動記憶體配置設定

js變量隻存該語言類型的資料和引用

js使用var定義變量  var a1=8 ; var  a2=7.5 ;var a3=true;

通過行數,提示原因找錯誤

undefine :未定義,即使定義了變量不指派或者指派不對也會報錯

var a=null(允許)

取得變量類型

var b=false

type of b

注意變量使用範圍

===============================================

表達式:

指派=

 算術:+-*/  %  括号

 判斷: >= <=   == != <> 

 字元連接配接

 console.log(re,re+4) :沒有改變re的值

 簡化表達 :

 +=     -=

 --      ++    

 =================================================

 條件 : 

 if()

 {

 }

  else {}

 多條件:

 if(條件)

 else if(條件)

 else if (條件)

 else 

邏輯運算符 :&&       ||    

注意 :盡量不要在判斷語句中做運算

num+=1

if(num)

//多條件,case

swich (value)

{

  case  1:

  {}

  break;

  case  2:

  {}

  break ;

  case  3:

  {}

  break;

  defalut :

  {}

  break ;

}

循環 :

while (條件)

{

}

for(初始化語句;條件判斷;疊代遞增或者遞減)

{

}

var i=4;

var j=5;

for(i=5,j=6;i+j<80;i=i+1,j=j+1)

{}

循環控制 :運用場景:for,while 

continue(跳出本次循環)

break 終止循環

===============================================

字元串 :

var str=“XXX”;

var str=‘XXX’;

var array=【】;空數組

array=【1,2,3,4】; 數字

array=【1,true,“Hello“,【1,2,3】】 數組嵌套

0作為數組索引開始

注意索引是否越界

===============================================

var table=

{

  age:14;

  name: "XXX";

    arrayxxx:【1,2,3,{

    adrr:”127.0.0.1“,

    port:6000

    }]

 }】

  table :

  {

  XXX :XXX

  X

  }

   array2;array

}

表可以存放所有的資料類型 , 數組内可以存表 ,表存數組

表的通路 =》key本質字元串

array2【”XXX“】

array2.XXX;

整數key隻能    表對象【整數值】 或者【”整數值“】通路

增加表成員  :表對象.XXXkey=XXX; 

==========================================

函數:

fuction XXX(參數)

{

代碼塊

}

function XXX(a1,a2)

{

  XXXXXXXX;

retun XXX;(傳回并跳出方法)

}

調用 :

XXX(3,4);

存放結果:

var ret=XXX(3,4);

引用傳遞 :

var my_add=XXX;

ret =my_add(3,4);

表中存方法=》

var mathabc={

my_add:XXXXXXXX;

  func_key :fuction()

  {

  XXXXXXXX

  }

}

var ret =mathabc.my_add(3,5);

mathabc.func_key();

=======================================================

Math函數:

Math.PI  ;圓周率

Math.random();          [0,1)    0到1 不包含1的小數

var value=min+(max-min+1)*Math.random();

向下取整:

Math.floor();

三角函數 sin ,cos,tan

value =Math.sin(XXXXXXXX);//傳入弧度

var degree=r*180/Math.PI (  傳入r 為弧度,轉為角度)

var r=(degrees/180)*Math.PI; (傳入degrees為角度,轉為弧度)

反三角函數

value =Math.asin() //傳入弧度

atan2 :傳回坐标角度 範圍(-180,180]=>(-PI,PI]

var  r=Math.atan2(1,1);

value =rad2deg(r);轉角度

Math.sqrt();開根号

====================================================

數組進階使用 :

array .length;

for(var index  in  array)

{

}

for(var i=0;i<array_data.length;i++)

{

}

數組添加對象

array_data.push(100);

array_data.push("Hello");

array_data.push({

key :"value"

})

找索引:

 var array_data.indexOf(300)//填寫的是數組的值

參數=>從2索引開始,删除個數

var data2=array_data.splice(2,2);

數組排序:

array_data=[1,2,3,4];

sort傳入方法

array_data.sort(

function(Ihs,rhs)

{

 if(Ihs>rhs)

{

 return  -1;

}

else if (rhs>Ihs)

{

 return 1;

}

else

{

  return 0;//Ihs==rhs

}

})

随機排序

array_data.sort(

function ( Ins,rhs)

{

if(Math.random()<=0.5)

{

 return -1;

}

else

{

 return 1;

}})

抽取随機:

value =array_data[0]

=============================================

表的進階使用:

删除對應的key

delete XXX["XX "]

delete XXX.sss;

==============================================

字元串進階 :

var str="XXXX "

str.length;

str.indexOf("X") 首次出現位置索引

var new_str= str.replace("X","3q")//替換,産生新對象

大小寫并産生了新對象

str.toLowerCase();

str.toUpperCase();

============================================

require("./XXX")

第一次加載js檔案并執行=>如果加載過就不執行,但都傳回一個module.exports對象,需要在被加載的檔案中定義module.exports對象,沒有定義則傳回{}

加載的檔案通過util可以調用被加載的js中的對象

加載:

 var util=require("./XXX")

被加載:

var utils=

{

  add:add,

  test:test,

};

module.exports=util;//util為對象

一般用類名定義接收,易于查找

============================================

function fun1(a1,a2)

{

 this;

}

 1.this的顯式傳遞=>上層決定this

函數.call :  

fun1.call({ XXXX  },3,4)   this={XXXX} 可以是表或者任意對象

2.this的隐式傳遞=>

var tools=

{

fun1:fun1,

}

表的函數key()       tools.fun1=>this=表

3.this的強制傳遞  =>底層決定this,優先級最高

var new_fun=fun1.bind({name ;"blake'});

new_fun(3,4);

tools.fun1=new_fun; 

tools.my_fun(3,4);   結果this依舊為強制表

fun1(3,4) //fun1為原方法,因為bind生成了新的方法對象,該相關的this為強制表,是以本this還是和環境有關的值console

new_fun.call({name :"" },3,4)//this還是強制表

結論:

強制的表顯示call,隐式也無法改變

=============================================

構造函數=>

function:可以填充表字段對象

function person(name,age)

{

  this.name=name;//增加屬性

}

person.prototype : 函數的表 ,函數未初始時為空表,可以填充方法,類的原型

person.prototype.get_age=function()

{

 return this.age;

}

var blake=new person("blake");

//step1:産生一個新表,調用person的方法,相當于顯示call傳遞this=》this表示新表

step2:同時會産生一個對象 (新表._proto_),并複制prototype表的内容

var ret=blake.get_age(); 

注意點

1會先去blake表中去尋找是否有get_age()key,沒有就去新表._proto_下去找

2如果沒有強制的this綁定,   新表.方法=>this為新表

3隻有新表的字段屬性和_proto_是屬于新表的,其他的如方法隻是new 新對象添加字段的手段,prototype是方法的複制手段

等價于=>

function new_person(name)

{

   var instance={};

   person.call(instance,name);//把instance作為this ,this.name為instance表添加key

   instance._proto_={};

   for(var key in person.prototype)

    {

      instance._proto_[key]=person.prototype[key];

    }

     return instance;

}

var xiaohong =new_person("xiaohong")

var ret=xiaohong.get_age();

等價于=》

var my_person=

{

 name:"XXXX";

 age :12,

_proto_ :

{

 get_name:person.prototype.get_name,

 get_age:person.prototype.get_age,

}

}

===========================================================

錯誤 :

Invalid or unexpected token(無效或者意外标記)=》格式不正确=》注意逗号,括号

==============================================================

subline快捷鍵:

https://blog.csdn.net/mycms5/article/details/70194045/

多行注釋 ctrl+ “+”+ /

==============================================================

 類:通過構造方法和xxx.prototype(類的成員函數)組成類,一類組成結構相同的對象

 構造函數和成員函數中的this為各自的類,可以完成各自的邏輯。

 Enemy.js:

function Enemy(name ,age)

{

   this.name=name;

   this age=age;

}

Enemy.prototype.acctack_player=fuction()

{

  consele.log("attack_player",this);//this代表Enemy新表

}

module.exports=Enemy;//Enemy為方法

main.js:

var Enemy=require(“./Enemy”)

var e1=new Enemy("hao",12);

e1.attack_player();

var e2=new Enemy("jj",16);

e2.attack_player();

=========================================================

類的繼承=>擷取原型方法,擴充方法

錯誤寫法 :BossEnemy.prototype=Enemy.prototype =>

原因: 隻是傳遞了Enemy.prototype的引用,并沒有複制對象到BossEnemy.prototype中,改變表值會改變

Enemy.prototype的值

方法和字段的繼承和擴充

方法1: 循環複制對象

function BossEnemy(name,age)

{

 Enemy.call(this,name,age)//this為新表,,無表名

  //擴充字段

  this.blood=90;

}

BossEnemy.prototype={}   

for(var i in Enemy.prototype)   

{

 BossEnemy.prototype[i]=Enemy.prototype[i];

}

方法2: 利用new機制複制

var a =function(){}//空表,隻有prototype對象 ,通過中間者傳輸

a.prototype=Enemy.prototype;

BossEnemy.prototype=new a();  =>a._proto_=>Enemy.prototype

擴充方法:

BossEnemy.prototype.boss_attack=fuction()

{

XXX;

}

var boss=new BossEnemy(“你好”,45);

boss.boss_attack();

boss.acctack_player(); //acctack_player方法中的this為新表,無表名

==========================================

函數重載:

BossEnemy.prototype.attack_player=function()

{

        Enemy.prototype.attack_player.call(this);//調用父類的attack_player,傳入的是boss表

      return this.name;

}

boss.attack_player();

===========================================

繼承函數=>實作類的繼承和擴充    

Class方法=》構造函數=》傳遞參數為表

Class(

{

  extend :Enemy,  //繼承對象

  init :function()

  {

  }

  boss_attack:function()

  {

  },

  add:function()

  {

  }

}

);

var BossEnemy2 =function Class(Class_desic)//傳入Class參數表引用

{

        var new_class=function(name,age)//new_class的構造函數,可以傳入參數

        {

           //字段繼承

             if(Class_desic.extend)

           { 

               Class_desic.extend.call(this,name,age)//調用基類構造函數

          }

          //字段擴充

          if(Class_desic.init)

          {

           Class_desic.init.call(this);//調用新類Class的初始函數

          }

        }

        //方法繼承

        if(Class_desic.extend)  

        { 

             var a=fnction (){};

             a.prototype=Class_desic.extend.prototype;

              new_class.prototype=new a();

        }

        else

        {

           new_class.prototype={};

        }

        //方法擴充

        for(var i in Class_desic)

        {

           if(i=="extend")

            { continue;}

            new_class.prototype[i]=Class_desic[i];

       }

       return new_class;// BossEnemy2=new_class

}

var b2=new BossEnemy2("whhw",32); //生成新表 ,調用Class方法,傳遞 this, this為新表

總結:new 和方法有關,單一new構造函數和new 類 不同

============================================

代碼規範:

快捷方式: ctrl+c, ctrl+v  

跳過單詞;ctrl+left or right;

選擇單詞 ctrl+shift+left or right

選中一行:shift+home or end

選中多行:shift+ up or down

win+E

shift+右鍵

 縮進:一個Tab

命名:

1駝峰 getName();

2匈牙利 GetName,要加上類型辨別 :iAge fDistance

3Linux命名 get_age

空格注意整齊

for(var i=0; i<=10,i++)

var utils=require("utils") //腳本名稱和定義的名稱相同可以友善尋找腳本對象

util.abc();

注意文法錯誤提示

繼續閱讀