Ext江湖笔记--function总结

最新推荐文章于 2024-11-01 13:37:40 发布

yaoyao44

最新推荐文章于 2024-11-01 13:37:40 发布

阅读量184

点赞数

分类专栏： js语言学习文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/yaoyao44/article/details/84342742

版权

js语言学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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("");
}
}
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("");
}
}
var parent = new Parent("John");
var child = new Children("Bob", 123);
parent.showInfo();
child.showInfo();
child.showMsg();
document.write("");
document.write("");
//call方法，是function里的一个方法。
//------------------------call方法简单示例-------------------------------
function test(str) {
document.write(this.name + "," + str+"");
}
var person = new Object();
person.name = "anllin";
//相当于调用了test方法
test.call(person, "welcome"); //将person赋给了test里的this。
document.write("");
document.write("");
//--------------------继承的第二种方式，call方法------------------------------
function Father(name) {
this.name = name;
this.showName = function () {
document.write(this.name + "");
}
}
function Sub(name, pwd) {
//关键的代码
Father.call(this, name);
this.pwd = pwd;
this.showPwd = function () {
document.write(this.pwd + " ");
}
}
var father = new Father("Father");
var sub = new Sub("Sub", 123456);
father.showName();
sub.showName();
sub.showPwd();
document.write("");
document.write("");

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