JS 小知识点的整理__(2)

最新推荐文章于 2022-10-26 06:00:00 发布

小星_day

最新推荐文章于 2022-10-26 06:00:00 发布

阅读量925

点赞数

分类专栏： JavaScript/html/CSS 文章标签： JS 关键点 Tips

本文链接：https://blog.csdn.net/xingxing1828/article/details/24270097

版权

JavaScript/html/CSS 专栏收录该内容

82 篇文章 0 订阅

订阅专栏

1、

在应用某个对象的时候，会先调用对象的valueOf()方法，这样可以取到一个可以操作的值。

    //o赋值了，可以直接进行操作
    var o = {
        valueOf: function () {
            return -1;
        }
    }

2、

非运算~

为该数值的负值减去1

~25 == -26

3、

&和|，是按位运算，25 | 3 == 27 ^这个是按位异或

而&& 和 ||是逻辑运算符运算，结果为 0、1，这种情况下，可能只计算半边的值

4、

with语句可以大大简化同一对象的操作
var t = location.ss;
var m = location.mm;
var n = location.nn
转化为
with(location){
 var t = ss;
var m = mm;
var n = nn;
}

不过大量使用with语句，会导致性能低

5、父窗体中操作iframe中的元素节点结构

在ie中使用：

document.getElementById("iframe的id").contentWindow.document

在ff chrome中：

window.frames 这是一个frame的窗体数组.取值后可以操作

但是要注意：

iframe访问不能够跨院，访问限制，父节点和iframe元素不能跨域

在iframe窗体中，取操作父窗体的元素节点

在iframe中获取父窗口的元素

格式：window.parent.document.getElementByIdx_x("父窗口的元素ID").click();

实例：window.parent.document.getElementByIdx_x("btnOk").click();

格式：$('#父窗口中的元素ID', parent.document).click();

实例：$('#btnOk', parent.document).click();

6、从数字数组中获得最大值和最小值

var  numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411]; 
var maxInNumbers = Math.max.apply(Math, numbers); 
var minInNumbers = Math.min.apply(Math, numbers);

7、不要用delete从数组中删除项目

开发者可以使用splice来代替使用delete来删除数组项。与其删除数组中未定义项目，还不如使用delete来替代。

var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ]; 
items.length; // return 11 
delete items[3]; // return true 
items.length; // return 11 
/* items will be equal to [12, 548, "a", undefined × 1, 5478, "foo", 8852, undefined × 1, "Doe", 2154,       119]   */

var items = [12, 548 ,'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' ,2154 , 119 ]; 
items.length; // return 11 
items.splice(3,1) ; 
items.length; // return 10 
/* items will be equal to [12, 548, "a", 5478, "foo", 8852, undefined × 1, "Doe", 2154,       119]   */

delete方法应该删除一个对象属性

8.Visible和display的区别：

visible是和display都可以隐藏属性。

但是visible元素虽然隐藏了，但是还是会占据节点元素的位置。

而display如果隐藏了，那么整体的节点结构会发生移动和变化。

两种情况的绑定事件都不会被触发！

9、JS静态作用域和动态作用域：

JS的作用域是静态的，当定义一个function时，function的作用域是定义function时所在的作用域，而不是调用function时所在的作用域。

当调用一个function时，就会创建一个新的作用域，在这个作用域中用var定义的变量就是局部变量，一般情况下function执行结束之后这个调用时所创建的作用域就会被系统回收。

在function圈套定义时，如果里面定义的function被保存了下来（如：赋给一个全局变量）。那么它所在的作用域（调用外面function时所创建的作用域）也必须一起保存下来（也就是说外面function执行结束时这个调用时所创建的作用域不会被系统回收，要等到保存下来的function被系统回收时系统一起回收）。
作用域保存下来在这个作用域中的所有局部变量当然也都保存了下来。

10、jQuery对于事件处理的常用方法：

函数名	说明	例子
preventDefault()	取消元素事件的默认动作例如: 对于超级链接a来说,有href属性,那么在点击a的时候就会导航至href所指向位置.我们再a的click事件中,调用本方法,就不会导航到指定位置	//取消事件默认动作 $("a").bind("click", function (e) { e.preventDefault(); });
isDefaultPrevented()	是否调用过preventDefault()方法	e.isDefaultPrevented()
stopPropagation()	取消事件冒泡	e.stopPropgation();
isPropagationStopped()	是否调用过stopPropagation()方法	e.isPropagationStopped()
stopImmediatePropagation()	取消执行该元素该事件处理函数的后续事件处理函数, 并取消事件冒泡	$("a").bind("click", function (e) { e.stopImmediatePropagation(); }); //不会被执行到 $("a").click(function () { alert("我被点击了"); });
isImmediatePropagationStopped()	是否调用过stopImmediatePropagation()方法	$("a").bind("click", function (e) { e.stopImmediatePropagation(); alert(e.isImmediatePropagationStopped()); });

11、类jsonp回调，跨域的思路是相当于插入一段script代码，因为script的src是不存在访问限制的问题的。

类似的代码思路如：

    var adsInit = function () {
        var ads = document.createElement("script");
        ads.type = "text/javascript";
        ads.async = true;
        ads.src = 'http://crm.ws.ctrip.com//Customer-Market-Proxy/AdCallProxy.aspx?re=ads&adlist=[{"adIDs":"3276-3277-3278","domID":"iAds"}]';

        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(ads, s);
        /*
        var body = document.getElementsByTagName("body")[0];
        body.appendChild(ads);
        */
    }

JS能够实现面相对象的特征如下：

·公有属性(public field)
·公有方法(public Method)
·私有属性(private field)
·私有方法(private field)
·方法重载(method overload)
·构造函数(constructor)
·事件(event)
·单一继承(single inherit)
·子类重写父类的属性或方法(override)
·静态属性或方法(static member)

完成面相对象的操作，有this方法和protype属性可以使用：

demo:

<script type="text/javascript">   
function Aclass()   
{   
this.Property = 1;   
this.Method = function()   
{   
    alert(1);   
}   
}   
var obj = new Aclass();   
alert(obj.Property);   
obj.Method();   
</script>

<script type="text/javascript">   
Object.prototype.Property = 1;   
Object.prototype.Method = function ()   
{   
    alert(1);   
}   
    
var obj = new Object();   
alert(obj.Property);   
obj.Method();   
</script>

<script type="text/javascript">   
function Aclass()   
{   
this.Property = 1;   
this.Method = function()   
{   
    alert(1);   
}   
}   
Aclass.prototype.Property2 = 2;   
Aclass.prototype.Method2 = function  
{   
    alert(2);   
}   
var obj = new Aclass();   
alert(obj.Property2);   
obj.Method2();   
</script>

如何让一个类型继承另外一个类型：

<script type="text/javascript">   
function AClass()   
{   
       this.Property = 1;   
       this.Method = function()   
       {   
              alert(1);   
       }   
}   
    
function AClass2()   
{   
       this.Property2 = 2;   
       this.Method2 = function()   
       {   
              alert(2);   
       }   
}   
AClass2.prototype = new AClass();   
    
var obj = new AClass2();   
alert(obj.Property);   
obj.Method();   
alert(obj.Property2);   
obj.Method2();   
</script>

子类，如何重写父类的方法：

<script type="text/javascript">   
function AClass()   
{   
       this.Property = 1;   
       this.Method = function()   
       {   
              alert(1);   
       }   
}   
    
function AClass2()   
{   
       this.Property2 = 2;   
       this.Method2 = function()   
       {   
              alert(2);   
       }   
}   
AClass2.prototype = new AClass();   
AClass2.prototype.Property = 3;   
AClass2.prototype.Method = function()   
{   
       alert(4);   
}   
var obj = new AClass2();   
alert(obj.Property);   
obj.Method();   
</script>

prototype属性在js中模拟了父类的角色，在js中体现面向对象的思想，prototype属性是非常关键。

你现在就要搞清什么事类变量、类方法、实例变量、实例方法。

现在你要理解this是指向类实例对象，prototype呢？

new操作符实例化一个对象的过程，js首先创建一个空的对象，然后这个对象被new后面的方法this关键字引用,然后方法对象通过操作符this，就给这个新创建的对象相应的赋予了属性。

prototype对象模拟了一个超类的效果，你会明白什么是超类的。

function Person(name,sex){this.name=name;this.sex=sex;}
Person.prototype.age=12;
Person.ptototype.print=function(){alert(this.name+"_"+this.sex+"_"+this.age);}
var p1=new Person("name1","male"); //p1的age属性继承了Person类的父类（即prototype对象）
var p2=new Person("name2","male");
p1.print();//name1_male_12
p2.print();//name2_male_12
 
p1.age=34 //改变p1实例的age属性
p1.print();//name1_male_34
p2.print();//name2_male_12
Person.prototype.age=22;//改变Person类的超类的age属性
p1.print();//name1_male_34(p1的age属性没有随着prototype属性的改变而改变）
p2.print();//name2_male_22(p2的age属性发生了改变）
p1.print()=function(){alert("i am p1")};
p1.print();//I am p1(p1的方法发生了改变)
p2.print();//name2_male_22(p2的方法并没有改变)
 
Person.prototype.print=function(){alert("new print method")};//改变超类的方法
p1.print();//I am p1(p1的print方法仍旧是自己的方法 ）
p2.print();//newprint method(p2的print方法随着超类的方法改变而改变)
 
js中对象的prototype属性相当于java中的static变量，可以被这个类下的所有对象公用。