每个函数都有一个prototype属性,该方法是关闭窗

2019-08-02 作者:小鱼儿主页高手论坛   |   浏览(52)

用过JavaScript的同学们肯定都对prototype如雷贯耳,但是这究竟是个什么东西却让初学者莫衷一是,只知道函数都会有一个prototype属性,可以为其添加函数供实例访问,其它的就不清楚了,最近看了一些 JavaScript高级程序设计,终于揭开了其神秘面纱。

复制代码 代码如下:

在 javascript 中有很多方式来创建对象,所以创建对象的方式使用起来非常灵活。那么,到底哪一种方式是最恰当的对象创建方式呢?构造模式,原型模式还是对象原意模式(Object literal)呢?

引言:
今天周末没事,就想起前面自己做的一个B2C的电子商务平台,还有些一些地方没有完善,就想着完善,嗯,问题是这样的,在电子商务平台中有这样一个场景,我将购物车放置在Session中,使其在整个购物的过程中都能从Session中得到购物车模型,我在购物车某型中有的商品都会在数据库中减少其购物车中购买的数量,但是如果我关闭窗口,怎样让Session中的购物车模型中的商品数量添加到数据库中,于是我查找了GOOGLE、百度,得到的第一个提示,就是:关闭窗口自动清除Session,于是找到的第一个方法就是在<body>标签使用onunload属性,调用某个js如:<body onunload=”close()”>该方法是关闭窗口时触发close()事件,于是我就可以在close()方法中定义删除Session的方法……
但是事实不是这样的,当你刷新这个页面,以及点击这个页面上的链接时onunload都会触发,于是我又在GOOGLE,百度中查找:得到的答案如下:

每个函数都有一个prototype属性,这个属性是指向一个对象的引用,这个对象称为原型对象,原型对象包含函数实例共享的方法和属性,也就是说将函数用作构造函数调用(使用new操作符调用)的时候,新创建的对象会从原型对象上继承属性和方法。

语法:
$(function(){
    var callback = function(r){  //r表示后台数据返回的数据.
    }
    $.get("",callback);   //引号里面写方法的路径
});

但这些模式具体是怎么回事呢?

复制代码 代码如下:

私有变量、函数

这样就可以得到后台方法得到的数据显示在html前端了.

在开始讲解之前,让我们先清楚地介绍一下关于 javascript 基本知识。

<script>
window.onunload = function(){if(self.screenTop>9000)alert('该窗口已经被关闭!')}
</script>

<script>
window.onunload = function(){if(self.screenLeft>9000)alert(该窗口已经被关闭!.')}
</script>

在具体说prototype前说几个相关的东东,可以更好的理解prototype的设计意图。之前写的一篇JavaScript 命名空间文章中提到过JavaScript的函数作用域,在函数内定义的变量和函数如果不对外提供接口,那么外部将无法访问到,也就是变为私有变量和私有函数。

以下是工作中写的一段js和后台方法:

有没有可能在 javascript 中实现面向对象编程的方式呢?

说明:
window.screenTop
获取浏览器客户区左上角相对于屏幕左上角的 y 坐标
screenTop>后面的数字必须大于你显示分辩率中的高度
比如,800*600, 这个数得大于600
window.screenLeft
获取浏览器客户区左上角相对于屏幕左上角的 x 坐标
screenLeft>后面的数字必须大于你显示分辩率中的宽度
比如,800*600, 这个数得大于800

复制代码 代码如下:

js:

答案是可能的,javascript 是可以创建对象的!这种对象可以包含数据及能够操作数据的方法,甚至可以包含其他对象。它没有类但拥有构造函数;它没有类继承机制,但是可以通过原型(prototype)实现继承。

通常这两个值设为9000
于是我使用上面的方法,实现了只有在关闭页面才触发onunload事件。

function Obj(){
                var a=0; //私有变量
                var fn=function(){ //私有函数

复制代码 代码如下:

现在看起来,我们已经了解了在 javascript 中创建对象及实现基于对象编程时所必须的组成部分。

总结:
① 当使用onunload属性时,你可以使用Ajax来清除Session,也可以使用window.location.href来触发某个请求,比如我在这个用的是struts2我可以用<body onunload=”javascript:window.location.href-‘${pageContext.request.contextPath }/cart/closeWindow.action'” >
然后有closeWindow.action这个请求去处理Session中购物车的商品,让其数量添加到数据库中;
② 在此处我也有Ajax来处理请求,但是事实上我们只要处理Session,并不要处理完Session后有任何返回的异步信息,所以我还是使用的触发一个请求的方法,最终的写法如下:

                }
            }

小鱼儿主页高手论坛,$(function(){
    var callback = function (r) {
        var data = "<marquee width='853;' height='250px;' scrollamount='2' scrolldelay='4' direction='up' behavior='loop' onmouseout='this.start()' onmouseover='this.stop()'><ul>"
        var data2 = "<div class='marquee_div'><span onclick='closeList()'><img src='Images/关闭icon.png' class='closeImg ml_fix_png' /></span>优惠名单</div>";
        for (var i = 0; i < r.length; i ) {
            data = ("<li><label>" r[i].time "</label><span>" r[i].CustomerName "</span>申请试用成功获得购买年服务年费9折优惠,恭喜!</li>");

我们都知道 javascript 拥有私有变量。一个通过“var”关键字定义的变量,只能在函数体中被访问,而不能在函数外被访问。那么,如果我们不通过使用“var”关键字来定义变量会怎样呢?我们现在不对这个问题进行深入探讨,可能是通过“this”进行访问的,我会在另外的时间来详细讲述这个问题。

复制代码 代码如下:

这样在函数对象Obj外部无法访问变量a和函数fn,它们就变成私有的,只能在Obj内部使用,即使是函数Obj的实例仍然无法访问这些变量和函数

        }
        data = "</marquee></ul>";
        $("#01_companys").html(data);
        var t_data2 = "";
        for (var i = 0; i < r.length; i ) {
            if (i % 2 == 0) {
                t_data2 = "</div><div class='listTitle'>";
            }
            t_data2 = "<div style='width:49%; height:40px; line-height:40px; float:left'>" (i 1) "." r[r.length - i - 1].CustomerName "</div>";
        }

现在回到之前的问题。到底哪一种方式是最恰当的对象创建方式呢?
让我们用已经知晓的知识,通过创建Person的对象是来试验一下。

<body
onunload="javascript:if(self.screenTop>9000) window.location.href='${pageContext.request.contextPath }/cart/closeWindow.action';">

复制代码 代码如下:

        $("#01_list").html(data2 (t_data2.length > 0 ? t_data2.substr(6, t_data2.length - 6) : "") "</div>");
    }
    $.get("/activity/trycompany", callback);
});

复制代码 代码如下:

var o=new Obj();
            console.log(o.a); //undefined
            console.log(o.fn); //undefined

后台代码(mvc4):

var Person = {
firstName : 'John',
lastName : 'Cody',
fullName : '',
message : '',

静态变量、函数

复制代码 代码如下:

createFullName : function () {
fullName = this.firstName ' ' this.lastName;
},

当定义一个函数后通过 “.”为其添加的属性和函数,通过对象本身仍然可以访问得到,但是其实例却访问不到,这样的变量和函数分别被称为静态变量和静态函数,用过Java、C#的同学很好理解静态的含义。

public ActionResult TryCompany()
        {
            string CustomerType = Res.CustomerType.TestCustomer.ToString();
            IList<Customers> vlist = o_Res.GetHtmlCustomers(1, 100, out pCount, (a => a.CustomerType == CustomerType));

changeMessage : function (msg) {
this.message = msg;
},

复制代码 代码如下:

            var list = vlist.ToList().ConvertAll(s =>
            {
                return new { s.CustomerName, time = s.AddDate.HasValue ? s.AddDate.Value.ToString("MM-dd HH:mm") : "" };
            });
            return Json(list, JsonRequestBehavior.AllowGet);
        }

getMessage : function () {
this.createFullName();
return this.message ' ' fullName;
}
}

function Obj(){

后台得到一个list,jq调用,遍历,然后显示在前端.

Person.firstName = 'Eli';
Person.lastName = 'Flowers'
Person.changeMessage('welcome');
var message = Person.getMessage(); // welcome Eli Flowers
alert(message);

            }

一个很简单的例子,肯定还有更简单的办法,等以后来挖掘.

这是对象原意模式(literal pattern)。这非常接近我们常创建对象的方式。如果你不需要关心私有/包装的成员,并且你知道不将创建这个对象的实例。那么,这种方式将会很适合你。公有的成员可以做所有私有成员的事情,不是吗?但是,这不是一个类,而是一个对象而已,不能被创建实例并且不能被继承。

            Obj.a=0; //静态变量

您可能感兴趣的文章:

  • Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
  • jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码
  • jQuery AJAX实现调用页面后台方法和web服务定义的方法分享
  • 前台JS(jquery ajax)调用后台方法实现无刷新级联菜单示例
  • jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
  • 使用jquery 的ajax调用总是错误亲测的解决方法
  • 浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
  • jquery.Ajax()方法调用Asp.Net后台的方法解析
  • jquery中的ajax方法怎样通过JSONP进行远程调用
  • jQuery AJAX实现调用页面后台方法

让我们尝试下其他的方面:

            Obj.fn=function(){ //静态函数

复制代码 代码如下:

            }

var Person = {
firstName : 'John',
lastName : 'Cody',
fullName : '',
message : '',

            console.log(Obj.a); //0
            console.log(typeof Obj.fn); //function

createFullName : function () {
fullName = this.firstName ' ' this.lastName;
},

本文由小鱼儿玄机30码发布于小鱼儿主页高手论坛,转载请注明出处:每个函数都有一个prototype属性,该方法是关闭窗

关键词: 小鱼儿玄机30码