第10天 javascript 高级学习

1.javascript 的组成

1.1ECMASCRIPT语法

1.2.DOM

1.3.BOM

2.JS基本数据类型：boolean ,undefine, string,number,null复杂类型Object;

3.创建对象方式

3.1创建对象的三种方式
//           字面量创建:
           var per1={
               name:"张三",
               age:"10",
               eat:function(){
                   console.log("吃");
               },
               sleep:function(){
                   console.log("睡觉");
               }
           };

//           通过构造函数创建

           function Person(){}

           var per2=new Object();
           per2.name="张三";
           per2.eat=function(){
               console.log("吃面包");
           }
           per2.sleep=function(){
               console.log("谁");
           }
           console.log(per1 instanceof Person);

//           自定义构造函数,可以找到对象的具体类型
           function Person(name,age){
               this.name=name;
               this.age=age;
               this.eat=function(){
                   console.log("吃");
               }
           }
           var per3=new Person("Man",10);
3.2 工厂模式创建对象（不常用）

4. 面向对象与面向过程两种方法对比切换 div 颜色

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style type="text/css">
           #div{
               background-color: yellow;
               width: 100px;
               height: 100px;
           }
       </style>



   </head>
   <body>

           
       <input type="button" name="button" id="but" value="显示效果" />
       <div id="div"></div>



       <script>
function ChangeStyle(but,div,color){
        this.but=document.getElementById(but);
        this.div=document.getElementById(div);
        this.color=color;

}
ChangeStyle.prototype.changeColor=function(){
        var that=this;
        this.but.onclick=function(){
            that.div.style.backgroundColor=that.color;
        };
};
var ts=new ChangeStyle("but","div","red");
ts.changeColor();
       </script>
   </body>
</html>

5.原型的简单写法

5.1 错误版：function Person(age,name){
               this.name=name;
               this.age=age;
           };
//           字面量方式
           Person.prototype={
               height:"180",
               eat:function(){
                   console.log("xjbskdv");
               }
           };
           var s=new Person("10","Maik");
           s.eat();
//           输出内存地址
           console.dir(Person);
           console.dir(s);

在Person ,s 的内存地址当中没有constructor构造函数

因此在原型中手动修改构造器的指向。
              Person.prototype={
//               手动修改构造器的指向
               constructor:Person,
               height:"180",
               eat:function(){
                   console.log("xjbskdv");
               }
           };

s._proto_==Person.prototype (true) 实例对象中的原型指向的是构造函数中的原型。

6.原型链

6.1 实例对象中的属性若没有，则会在实例对象的_protype_所指向的原型对象（构造函数中的原型对象）中查找。

6.2 “一次性函数” （)(); (funtion(){

}());

自调用函数声明的时候直接调用

(function(){
console.log("once");
})();

等价于：

function F(){

console.log("once");

}

F();

可解决函数外命名冲突的问题，将函数内变量和函数外变量隔开。

js是动态类型语言，在将实参赋给形参的过程中，对象之间的传递，传递的是地址值。

如何把局部变量变为全局变量？将局部变量的值赋给window的属性即可。

功能：生成一个随机数对象，在页面中调用。（通过自定义函数，将局部随机数对象转换为全局对象），在页面中调用产生随机数。随机产生食物。

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style type="text/css">
           #map{
               width: 800px;
               height: 800px;
               background-color: black;
               position: relative;

           }
           #energy{
               width:20px;
               height: 20px;
               background-color: green;
               position: absolute;
               top:780px;
               left: 30px;
           }
       </style>


   </head>
   <body>
       <div id="map">
           <div id="energy">

           </div>
       </div>

   <script src="common.js"></script>
   <script>
           //生成随机数对象，全局使用
           (function(win){

               function CreatRandom(){

               }

               CreatRandom.prototype.randomNum=function(){
                   return Math.floor(Math.random()*780);
               }
               win.random=new CreatRandom();
           })(window);
           console.log(random.randomNum());
           function ChangeForm(map,energy,json){
               this.map=map;
               this.energy=energy;
               this.json=json;
           }
           ChangeForm.prototype.init=function(){
               for(var i in this.json){
                   this.energy.style[i]=this.json[i];
               }

           }
           var json={"top":random.randomNum()+"px","left":random.randomNum()+"px"};
           var myJson=JSON.stringify(json, null, 2);
           console.log(myJson);
           var form=new ChangeForm(my$("map"),my$("energy"),json);
           form.init();
       </script>
   </body>
</html>

第10天 javascript 高级学习

猜你喜欢