Ext江湖笔记--function总结

Extjs基础:
一、 Ext的UI组件:
1、 MessageBox:
原生的alert会让脚本“挂起”,而Ext.MessageBox不会。
例如:
原生的alert
Ext.onReady(function(){
var fn = function(){
alert("导致脚本挂起,后续代码无法运行");
Ext.DomHelper.insertHtml('beforeEnd', Ext.getBody().dom, "执行到这里结束")
}
fn();

});
MessageBox:
Ext.onReady(function(){
var fn = function(){
Ext.Msg.alert("友情提示", "Ext.Msg不会导致脚本挂起");
Ext.DomHelper.insertHtml('beforeEnd', Ext.getBody().dom, "执行到这里");
}

fn();
});


其实Ext.MessageBox里面最核心的方法就是show,前面的alert只是show的快捷形式;



Js基础:
1、
使用var定义的是局部变量,不使用var定义的变量默认为全局变量;

2、定义对象的方法:

Var obj = new Object();

Var obj = {};

定义一个数组的方法:

Var arr = new Array();

Var arr = [];

3、js中alert(10/3)的小数位数使用toFixed()制定;

4、等值判断

记住一个简单的规则: “==”是值相等,“===”是严格相等(除了值相等还必须类型相同)

5、instanceof语句:

JavaScript中instanceof运算符是返回一个 Boolean 值,指出对象是否是特定类的一个实例。
使用方法:
result = object instanceof class
其中result是必选项。任意变量。
object是必选项。任意对象表达式。
class是必选项。任意已定义的对象类。

说明
如果 object 是 class 的一个实例,则 instanceof 运算符返回 true。如果 object 不是指定类的一个实例,或者 object 是 null,则返回 false。

6、delete运算符:
var obj   = {};
  obj.name = "";
 
  alert(obj.name);
  delete obj.name;
  alert(obj.name);
delete可以把一些不需要的属性动态的删除,大量使用delete是节省内存的技法。

7、[] 运算符:
他与“.”运算符作用一样,但是,如果不知道一个对象中的那些属性,又不想把他的全部属性拿出来看,就需要使用[]运算符;

8、()运算符:
这是一个“操作符”可以是函数运行起来,
var a  = 0;
var fn = (a = 10, function(){alert(a * 10);});
fn();
小括号会一次运行这些表达式,并且将最后一个表达是结果返回;
9、eval语句:
alert(eval("2+3"));
是一个运算语句;

Js面向对象和继承机制
1、 原型查找:
如果在实例中找不到指定的属性就到构造函数原型上找;
2、 对象冒充:
除了“原型查找”外,“对象冒充”也是用来模拟继承的常用技巧;
原型继承利用了查找机制和函数作用域机制,而对象冒充则是赤裸的属性拷贝,把父类的所有实例属性和方法全部拷贝到子类中;

“对象冒充”法存在如下重要特性:
(1) 父类中通过this进行赋值的属性被继承,但是父类prototype上定义的属性不会被继承;
(2) 不想要的实例属性同样被继承下来,如果子类中不需要这些属性,需要自己用delete把他们删除掉;
(3) 没有constructor的问题,因为并没有改变子类构造函数的prototype;
3、 js实现继承的几种方式:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript">
        // ------------------------继承的第一种方式:对象冒充-----------------------------
        function Parent(name) {
            this.name = name;
            this.showInfo = function () {
                document.write(name);
                document.write("</br>");
            }
        }
        function Children(name, pwd) {
            //下面三行代码实现了子对象和父对象指向同一个引用
            //关键的代码
            this.method = Parent;
            this.method(name);
            delete this.method;
            this.pwd = pwd;
            this.showMsg = function () {
                document.write(this.pwd);
                document.write("</br>");
            }
        }
        var parent = new Parent("John");
        var child = new Children("Bob", 123);
        parent.showInfo();
        child.showInfo();
        child.showMsg();
        document.write("");
        document.write("</br>");
        //call方法,是function里的一个方法。
        //------------------------call方法简单示例-------------------------------
        function test(str) {
            document.write(this.name + "," + str+"</br>");
        }
        var person = new Object();
        person.name = "anllin";
        //相当于调用了test方法
        test.call(person, "welcome"); //将person赋给了test里的this。
        document.write("");
        document.write("</br>");
        //--------------------继承的第二种方式,call方法------------------------------
        function Father(name) {
            this.name = name;
            this.showName = function () {
                document.write(this.name + "</br>");
            }
        }
        function Sub(name, pwd) {
            //关键的代码
            Father.call(this, name);
            this.pwd = pwd;
            this.showPwd = function () {
                document.write(this.pwd + "<br>");
            }
        }
        var father = new Father("Father");
        var sub = new Sub("Sub", 123456);
        father.showName();
        sub.showName();
        sub.showPwd();
        document.write("");
        document.write("</br>");

        //--------------------继承的第三种方式,apply方法------------------------------
        function Mother(name) {
            this.name = name;
            this.showName = function () {
                document.write(this.name + "</br>");
            }
        }
        function Daugther(name, pwd) {
            //关键的代码
            Mother.apply(this, new Array(name));
            this.pwd = pwd;
            this.showPwd = function () {
                document.write(this.pwd + "<br>");
            }
        }
        var mother = new Father("Mother");
        var daugther = new Sub("Daugther", 654321);
        mother.showName();
        daugther.showName();
        daugther.showPwd();
        document.write("");
        document.write("</br>");
        //--------------------继承的第四种方式,prototype chain方式------------------------------
        //缺点:无法给构造函数传参数。
        function Human(){ }
        Human.prototype.name = "human";
        Human.prototype.showName = function () {
            document.write(this.name+"<br>");
        }
        function Student() { }
        //关键的代码
        Student.prototype = new Human();
        Student.prototype.password = 456789;
        Student.prototype.showPwd = function () {
            document.write(this.password + "<br>");
        }
        var human = new Human();
        var student = new Student();
        student.name = "student";
        human.showName();
        student.showName();
        student.showPwd();
        document.write("");
        document.write("</br>");
        //--------------------继承的第五种方式,混合方式------------------------------
        function FatherClass(name) {
            this.name = name;
        }
        FatherClass.prototype.showName = function () {
            document.write(this.name + "<br>");
        }
        function SubClass(name, pwd) {
            //关键的代码
            FatherClass.call(this,name);
            this.pwd = pwd;
        }
        //关键的代码
        SubClass.prototype = new FatherClass;
        SubClass.prototype.showPwd = function () {
            document.write(this.pwd + "<br>");
        }
        var f = new FatherClass("FatherClass");
        var s = new SubClass("SubClass", 45678);
        f.showName();
        s.showName();
        s.showPwd();
    </script>
</body>
</html>


Js的Dom操作:


注:JS是以“函数(function)”为中心的语言,而java却是以“类(class)”为中心的语言;



Js的function:
1、
return一个函数的方式,可以让函数“穿越”作用域的限制,从而让外层作用域能够“触
摸”到本来无法触摸的“内层”函数和变量。
       function outerFn(){
            function innerFn(){
            alert("一枝红杏出墙来");
            }
            return innerFn;
            }
            var cache = outerFn();
            cache();

2、 call和apply:
function muFunc(){alert(this.name);}
            muFunc.call({name: '姚明'});
            muFunc.apply({name:'主任您好'});
注解:
(1) 对于java一个实例来说:this关键字总是指向当前实例的,而且不可能发生变化。 而JS不同,函数中的this并不一定指向特定的对象,它是可变的。
(2) myFunc.call({},var1,var2,var3…)  call的第二个参数为可变参数;
(3) myFunc.apply({},[var1,var2,var3]) apply的第二个参数为数组;
3、,我们知道 JS 对象的属性是可以动态添加、删除的,既
然函数可以被当做数据看待,显然也可以动态地被添加、删除。
4、“函数也是数据”,其实不仅如此,函数还是对象,它也有自己的类 定义:Function。
var fn=new Function('x','y','alert("Just coding!")');
alert(fn instanceof Object);
fn();


Function 的构造规则是这样的:可以接受任意多个参数,最后一个参数被当做“函数
体”,之前的所有参数都被当做函数参数。那么,这和我们前面使用var fn=function(){}这
种方式定义函数有什么不同呢?有两个重要的特性必须注意:
(1)函数构建时机不同:使用 new Function()方式手动创建的函数,是在运行时才会
创建,而使用 var fn=function(){}这种方式声明的函数,当浏览器加载完脚本,脚本引擎扫
描到这段代码的时候;就已经开始了函数初始化动作。
(2)作用域不同:在前面我们见识到了函数嵌套的技法,并且知道了 JS 函数总是在
“词法作用域”中被执行。但是使用new Function()这种方式手动创建出来的函数,其作用
域总是指向“顶级作用域”,也就是window。


11月1日
4、 原型查找
如果从实例对象上没有找到指定的属性,那么就尝试从它构造
函数的prototype对象上去找;如果还找不到,继续找prototype对象构造函数的prototype。
如果这个过程中找到了需要的属性,立即返回;否则,一直到脚本返回null为止。


注解:
在执行person.sayHello 的时候,发现person上并
不存在所谓的 sayHello 方法,这个时候引擎就尝试到
构造函数Person.prototype上去找sayHello 方法。
此时的 Person.prototype 已经被我们赋值成了 Animal 的实例,于是引擎又不厌其烦地
到这个匿名的Animal实例上“翻箱倒柜”一番,还是没找到。怎么办呢?既然你是Animal的实例,那好吧,我再到你的构造函数 Animal.prototype 上去找。这下成功了,在 Animal
的 prototype上顺利找到了sayHello 函数。辛苦了半天的脚本引擎终于成功了!
5、 闭包
闭 包不是一个单纯的东西,它是函数及其作用域链组成的“综合体”;
闭包构造三步走:
(1)在函数A内部定义一个函数B。
(2)通过调用 A把B的引用返回出来,赋值给其他作用域中的变量C。
(3)通过C执行B。



你可能感兴趣的:(JavaScript)