您的位置：首页 > Web前端 > JavaScript

奔跑吧，我的JavaScript(3)---JavaScript浏览器对象

2015-08-27 22:21 716 查看

Window对象

1.是BOM的核心，window对象指向当前的浏览器窗口，最高层对象之一。
2.所有JavaScript全局对象，函数以及变量均自动成为window对象成员
3.全局变量是window对象的属性
4.全局函数是window对象的方法
5.window尺寸
window.innerHright/window.innerWidth，浏览器窗口的内部高度/宽度
6.window方法
window.open() 打开新窗口
window.close() 关闭窗口

计时器

主要是指计时事件，使用JavaScript，我们有能力做到在一个设定的时间隔之后来执行代码，而不是在函数被调用后立即被执行
1.计时方法
setInterval(); 间隔指定的毫秒数不停地执行指定的代码
clearInterval(); 停止setInterval()方法
setTimeout(); 暂停指定的毫秒数后执行指定的代码
clearTimeout(); 停止setTimeout()方法
曾经遇到一道面试题，也是考察这方面的知识
小贤是一条可爱的小狗（Dog），它的叫声很好听（wow）,每次看到主人的时候就会乖乖叫一声（yelp）。从这段描述可以得到以下对象：

<span style="font-size:14px;"> function Dog(){
        this.wow = function(){
            alert("Wow");
        }
        this.yelp = function(){
            this.wow();
        }
    }</span>

小蟒和小贤一样，原来也是一条可爱的小狗，可是突然有一天疯了（MadDog），一看到人就会每隔半秒叫一声（wow）的不停叫唤（yelp）。请根据描述，按示例的形式用代码来实现（提示：继承，原型，setInterval）

<span style="font-size:14px;">function MadDog(){
        this.yelp = function(){
            var self = this;     //继承
            setInterval(function(){
                self.wow();
            },500);
        }
    }
    MadDog.prototype = new Dog();      //声明原型
    var dog = new Dog();
    dog.yelp();
    var maddog = new MadDog();
    maddog.yelp();</span>

当然，我们也可以不用到继承或者原型的方法去实现，那么我们就可以这样：

<span style="font-size:14px;">   var yelp = function(){
            alert("wow");
            var wow = setTimeout(function(){
                yelp();
            },500);
        }
    yelp();</span>

直接调用方法，也可以直接实现

History对象

window.history对象包含浏览器的历史（URL）的集合
history.back(); 与在浏览器点击后退按钮相同
history.forward(); 与在浏览器中点击按钮向前相同
history.go(); 进入历史中的某页面
我们常常会遇到这样的情况，当我们在浏览网站时，有的内容需要我们登陆后才可以继续浏览（吐槽一下百度贴吧，如果不登陆，只能停留在第一页，简直无爱），当我们登陆成功后，会返回之前我们所浏览的页面。那么我们该怎样实现？

<span style="font-size:14px;"><body>
<!--之前浏览界面-->
<a href="test1.html">跳转</a>

</body>
<body>
<!--登陆界面-->
<form>
    <input type="text" id="username">
</form>
<button id="btn" onclick="demo()">提交</button>
<script>
    function demo() {
        var name = document.getElementById("username").value;
        if (name == "L") {

            history.go(-1);
        } else {
            alert("用户名输入错误，请重新输入！");
        }
    }
</script>
</body></span>

Location对象

window.location对象用于获得当前页面的地址（URL），并把浏览器重定向到新的页面
对象属性
location.hostname 返回web主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回web主机的端口
location.protocol 返回所使用的web协议
location.href 返回当前页面的URL
location.assign() 方法加载新的文档
（用innerHTML转换）

<span style="font-size:14px;">location.assign("http:\\www.baidu.com");</span>

Screen对象

window.screen 对象包含有关用户屏幕的信息，重点关注不同屏幕的适配性以及对开发人员的布局有所帮助
属性
screen.availWidth/screen.availHeight 可用屏幕的宽度/高度
screen.width/screen.height 屏幕的宽度/高度

JavaScript面向对象

认识面向对象
（1）一切事物皆对象
（2）对象具有封装和继承特性
（3）信息隐藏
下面，我们来看面向对象的书写方式ONE

<span style="font-size:14px;">/**
 * Created by pc on 2015/8/27.
 */
(function() {
    function person() {
        this.name = name;
    }

    person.prototype.say = function () {     //原型
        alert("Hello");
    }
    window.person = person;      //信息调用，闭包内执行
}());       //信息封装
function Student(){
    this.name = name;
}
/*子类调用父类方法*/
Student.prototype = new person();   //继承

/*父类回调子类方法*/
var per = Student.prototype.say;
Student.prototype.say =  function(){
    per.call(this);
    alert("stu-Hello");
}

var stu = new Student();
stu.say();

</span>

书写方式TWO

<span style="font-size:14px;">/**
 * Created by pc on 2015/8/27.
 */
(function() {
    function person() {
        var _this = {};
        _this.name = name;
        _this.say = function(){
            alert("Hello");
        }
        return _this;
    }
    window.person = person;
}());       //信息封装
function Student(){
    var _this = person();
    /*父类回调子类方法*/
    var per = _this.say;
    _this.say =  function(){
        per.call(this);
        alert("per-Hello");
    }
    return _this;

}
/*子类调用父类方法*/
var stu = new Object();
stu.say();

</span>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航