javascript笔记(BOM-原型对象)

BOM

BOM:全称browser object model。

浏览器对象模型

window是BOM的对象之一

打开一个新网页:window.open()

关闭当前网页:window.close()

全局刷新:window.location.reload()

获取浏览器窗口的高度和宽度

$("button").click(function(){
    var height = window.innerHeight;
    console.log(height);
    var width = window.innerWidth;
    console.log(width);
});

resize事件:当浏览器窗口尺寸发生改变时,触发该事件

$(window).resize(function(){
    var width = $(this).innerWidth();
    var height = $(this).innerHeight();
    console.log(width+','+height);
})

scroll事件:当页面滚动时,触发该事件

$(window).scroll(function(){
    console.log(1);
})

获取窗口中垂直滚动条的位置

var num = $(window).scrollTop();
console.log(num);

原型对象

构造函数

构造函数:在javascript中,用new关键字来调用的函数,称为构造函数。创建有相同的属性和方法的对象时,我们通常使用构造函数(也成为了类)

定义和调用构造函数

  1.  使用首字母大写方法定义
  2. 属性使用this关键字定义
  3. 使用new方法,创建新的函数名进行调用

创建不带参数的构造函数

<script>
    // 创建名为Cat的构造函数(类)    
    function Cat(){
        // 定义构造函数中的属性
        // 使用this方法进行定义
        this.name = "喵星人";
        this.age = "3";
        this.color = "白色";
    };
    // 调用构造函数(调用类)
    var cat = new Cat();
    console.log(cat.name);
</script>

创建带有参数的构造函数

<script>
    // 创建名为Cat的构造函数(类)
    // 构造函数进行传参数
    function Cat(name,age,color){
        // 定义构造函数中的属性
        // 使用this方法进行定义
        this.name = name;
        this.age = age;
        this.color = color;
    };
    // 调用构造函数(调用类)
    var cat = new Cat("喵星人",20,"白色");
    console.log(cat);
    console.log(cat.name);
</script>

在构造函数中创建方法
 

<script>
    // 创建名为Cat的构造函数(类)
    // 构造函数进行传参数
    function Cat(name,age,color){
        // 定义构造函数中的属性
        // 使用this方法进行定义
        this.name = name;
        this.age = age;
        this.color = color;
        // 在构造函数中创建方法
        this.eat = function(){
            console.log(this.name+"吃饭");
        };
    };
    // 调用构造函数(调用类)
    var cat = new Cat("喵星人",20,"白色");
    // 调用构造函数中的方法
    cat.eat();
</script>

创建(定义)

function Function(){
    this.属性名 = "属性值";
};

调用(创建实例)

调用(创建实例):new 构造函数名();

构造函数与普通函数的区别:

  1. 构造函数也是一个普通函数,创建方式和普通函数一样,但构造函数习惯上首字母大写。
  2. 构造函数和普通函数的区别在于:调用方式不一样,作用也不一样(构造函数用来新创建实例对象)
  3. 调用方式不一样:普通函数的调用方式:直接person(),构造函数的调用方式:需要使用new关键字来调用new Person()
  4. 构造函数的函数名与类名相同:Person()这个构造函数,Person即是函数名,也是这个对象的类名
  5. 内部用this来构造属性和方法

原型对象

构造函数在创建实例后,是无法在进行添加属性的,所以每一个构造函数都有一个prototype属性,这个属性指向一个原型对象,这个原型对象上的使用属性和方法都可以被这个构造函数的实例使用

prototype - 构造函数名.prototype.属性名 = 属性值
<script>
    // 创建构造函数
    function Person(name,age){
        this.name = name;
        this.age = age;
    };
    // 给构造函数创建原型对象
    Person.prototype.sayName = function(){
        console.log(this.name);
    };
    // 创建构造函数的实例
    var person = new Person("小王",17);
    // 调用构造函数的原型对象
    person.sayName();
</script>

原型对象的优点:通过原型添加的方法,可以解决数据共享问题,从而节省了内存空间。

<script>
    // 创建构造函数
    function Person(name,age){
        this.name = name;
        this.age = age;
    };
    // 将eat方法添加到Person的原型中
    Person.prototype.eat = function(){
        console.log("吃饭");
    };
    // 创建实例
    var pev1 = new Person("小明",18);
    var pev2 = new Person("小江",20);
    // pev1与pev2的实例进行判断为false
    console.log(pev1 === pev2);

    // 调用实例中的方法
    pev1.eat();
    pev2.eat();
    // pev1与pev2的实例中的方法进行判断,为true
    console.log(pev1.eat() === pev2.eat());
</script>

基于元素的继承

继承是一种关系,父类与子级类的继承关系,通过原型来实现继承父类的属性和方法。

继承就是为了数据共享(原型对象的优点),注:在子类的原型对象继承父类的原型对象后,才可以定义子类本身的原型方法,否则会被父类的原型方法所覆盖或替换。

继承方法:子类名.prototype = new 父类名();
<script>
    //  创建Person的构造函数
    function Person(name){
        // 创建属性
        this.name = name;
    };
    // 给Person名的构造函数创建play方法
    Person.prototype.play = function(){
        console.log("会打篮球");
    };
    // 创建名为Son的构造函数
    function Son(age){
        // 创建属性
        this.age = age;
    };
    // Son子类继承Person父类的属性以及方法
    // 子类需要先继承父类的原型对象在进行自我方法的定义
    Son.prototype = new Person("小明");
    // 给Son名的构造函数创建studg的方法
    Son.prototype.studg = function(){
        console.log("踢足球");
    };
    // 创建名为Per的实例对象,继承Oerson的属性以及方法
    var per = new Person("小明");
    // 创建名为Son的实例对象,继承了Son的属性以及方法
    var son = new Son(17);
    // 输出子类实例对象,调用Person父类的属性
    console.log(son.name,son.age);
    // Son子类实例对象,调用Person父类的方法
    son.play();
    // Son子类实例对象,调用son子类的方法
    son.studg();
</script>
发布了134 篇原创文章 · 获赞 109 · 访问量 7万+

猜你喜欢

转载自blog.csdn.net/qq_44607694/article/details/103432408
今日推荐