zoukankan      html  css  js  c++  java
  • js 杂记

      自己一直是做后端,js这东东虽然常写,但都是基于jquery 写写简单Dom的操作。渐行渐远.....js一些基础被遗忘。下面杂文乱记js,根据自己理解记下js中的对象、函数等知识,以备后需只用。麻烦各位大侠抛砖引玉。

         一、对象

       1.先看下js数据类型:字符串、数字、布尔、数组、对象、Null、Undefined。那何为对象呢,像C#所有类型都是继承object类型,且方法对可以作为js对象。

       2.对象创建和基本使用:创建方式 :(1)对象初始化方式。(2)函数式 。(3)new object()。属性访问方式 :(1)obj["proName"] (2)obj. proName 。方法:obj.。

       (1)对象初始化方式创建对象

     1  //1.初始化方式创建对象
     2         var PeopleInit = {
     3             age: 12,
     4             name: "tom",
     5             sayHello: function () {
     6                 return "name:" + this.name + "----age:" + this.age;
     7             }
     8         };
     9         PeopleInit.name = "jack"; 
    10        // var peple1 = new PeopleInit();//对象不需要new
    11         document.writeln(PeopleInit.sayHello() + "<br/>");
    View Code
     

      (2)函数式 :可以通过原型链附件属性、方法等。

     1  //2.函数方式创建  如果PeopleMethod方法对象和它的原型链都有相同的属性,会先访问方法对象中的属性,
     2         //再去原型链中找属性,对象的方法查找方式亦同。
     3        function PeopleMethod() {
     4             this.age = 18;
     5           // this.name = "jack";
     6             this.sayHello=function(){
     7                 return "name:" + this.name + "----age:" + this.age;//没有name 咋办 找原型链吧
     8             };
     9         }
    10        PeopleMethod. prototype = {
    11             name:"keke",
    12             sayHello2:function () {
    13                 return "namePrototype:" + this.name + "----agePrototype:" + this.age;
    14             }
    15         };
    16            
    17         var people1 = new PeopleMethod();
    18         document.write(people1.sayHello());
    19         document.writeln(people1.sayHello2());
    View Code

    (3)new Object()方式

    1    //3.obj 
    2         var objPeople = new Object();
    3         objPeople.name = "testObj";
    4         objPeople.sayHello = function () {
    5             return "name:"+this.name
    6         }
    7         document.write(objPeople.sayHello());
    View Code

    (4)继承

     //继承方式1 
            (function () {
                function Student() { };
                Student.prototype = new PeopleMethod();
                var supperSay = Student.prototype.sayHello2;
                Student.prototype.sayHello = function () {
                    console.log("People's sub");
                };
                Student.prototype.sayHello2 = function () {
                    var result = supperSay.call(this);
                    console.log(result);
                    console.log("After Super Method Call");
                };
    
                var n = "";
                window.Student = Student;//自执行函数+window变量赋值 。封装性,避免n变量成为window全局变量
            }());
          
            var s = new Student();
            console.log(s.age);
            s.sayHello();
            s.sayHello2();
    
         // 继承方式2
            var Teacher = {
                __proto__: PeopleInit,//原型链 实现继承
                say: function (name) {
                    if (name) {
                        this.name = name;
                    }
                    console.log("name:"+this.name+",this.age:"+this.age);
                }
            }
            Teacher.say("bill");
    View Code

    二 、函数

    1.函数也为对象。函数内部可嵌套函数,嵌套的函数可以访问父级函数变量并将其返回,这就是我理解的闭包。

     1  console.log (add1(1, 2));
     2         //1.函数声明
     3         function add1(a, b) {
     4             return a + b;
     5         }
     6 
     7         //2.函数表达式:匿名函数也属于函数表达式。
     8        // var c = add2(1, 2);
     9         //报错 Uncaught TypeError: Property 'add2' of object [object Object] is not a function 
    10         //不会像函数声明一样提前
    11         var add2 = function (a,b) {
    12             return a + b;
    13         }
    14         console.log(add2(1, 2));
    15 
    16        (function(a,b) {
    17           console.log(a+b);
    18        })(1, 2);
    19 
    20         //闭包
    21        function addBiBao(a,b) {
    22            b = 10;
    23            return function() {
    24                 return a + b;//访问父级变量b
    25            }
    26        }
    27        var result = addBiBao(1, 2);
    28        console.log(result());
    29 
    30         //3.函数构造器
    31        var fAdd=new Function("a","b","alert(a+b)");
    32        fAdd(1,2);
    View Code

    今天就到这里吧,写的很仓促、很基本,以后有时间希望在深入研究...。

       

  • 相关阅读:
    html5——拖拽
    html5——多媒体(四)
    html5——多媒体(三)
    html5——多媒体(二)
    html5——全屏滚动
    html5——web字体
    html5——伸缩比例案例(携程)
    html5——伸缩比例
    html5——伸缩布局
    html5——多列布局
  • 原文地址:https://www.cnblogs.com/chi8708/p/4374012.html
Copyright © 2011-2022 走看看