js高级day1

最新推荐文章于 2024-09-06 11:26:45 发布

zyq200301

最新推荐文章于 2024-09-06 11:26:45 发布

阅读量32

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/zyq2940107995/article/details/131900184

版权

面向对象

面向对象的概念

过程式代码的高度封装，提高代码开发效率和可维护性
面向对象不是面向过程的替代，而是面向过程的封装

面向对象的特征

封装性
继承性
多态性

创建对象的四种方法

字面量创建
new Object()
工厂函数
构造函数

字面量创建

var phone = {
        brand: 'vivo',
        color: 'black',
        memory: '128',
        play: function () {
            console.log('喜欢玩');
        }
    }

new Object()

var phone = new Object();
    phone.brand = 'vivo';
    phone.color = 'black';
    phone.memory = '128';
    phone.play = function () {
        console.log('喜欢玩');
    }

工厂函数

function phone(brand, color, memory, play) {
        var phone = new Object();
        phone.brand = brand
        phone.color = color;
        phone.memory = memory;
        phone.play = play;
        return phone;
    }
    var phone1 = phone('vivo', 'black', '128', function () { console.log('喜欢玩') })

构造函数

function Phone(brand, color, memory, play) {
        this.brand = brand;
        this.color = color;
        this.memory = memory;
        this.play = play;
    }
    var phone2 = new Phone('vivo', 'black', '128', function () { console.log('喜欢玩') });

constructor

任何对象都有constructor属性，实例化对象的constructor属性指向构造函数

DOM

console.log(document.getElementsByTagName('div')[0].constructor);
//ƒ HTMLDivElement() { [native code] }

BOM

console.log(history.constructor);
    //ƒ History() { [native code] }

自定义

	var obj = {};
    console.log(obj.constructor);
    //ƒ Object() { [native code] }

内置对象

console.log(new Date().constructor);
    //ƒ Date() { [native code] }

数组

var arr = [1, 2, 3];
    console.log(arr.constructor);
    // ƒ Array() { [native code] }

函数

var fun = function () { };
    console.log(fun.constructor);
    //ƒ Function() { [native code] }

constructor判断数据类型

var num = 1;
    console.log(num.constructor == Number);//true

instanceof关键字

实例化对象

function Car(name, color, run) {
        this.name = name;
        this.color = color;
        this.run = run;
}
var car = new Car('baoma', 'black', function () { console.log('会飞') });
console.log(car instanceof Object);//true

DOM

console.log(document.getElementsByTagName('div')[0] instanceof Object);
//true

BOM

console.log(window instanceof Object);
//true

自定义

var obj = {};
console.log(obj instanceof Object);
//true

内置对象

console.log(new Date() instanceof Object);
//true

数组

var arr = [1, 2, 3];
console.log(arr instanceof Object);
//true

函数

var fun = function () { };
console.log(fun instanceof Object);
//true

原型

原型的作用

节省内存空间实现数据共享

构造函数实例化对象原型三者之间的关系

1.任何函数都有prototype属性，他本身就是对象
2.构造函数也是函数，也有prototype属性，我们称之为原型
3.构造函数原型上的属性和方法，可以被实例化对象继承
4.任何对象都有constructor属性，实例化对象的constructor属性指向构造函数
5.原型也是对象，也有constructor属性，原型对象constructor属性指向构造函数
6.任何对象都有__proto__属性，他是一个指针，实例化对象的__proto__属性指向构造函数的原型。

//    1.
    var fun = function () { };
    console.dir(fun);
    console.log(fun.prototype);
    // 2.
    function Car(name, color, run) {
        this.name = name;
        this.color = color;
        this.run = run;
    }
    console.log(Car.prototype);
    // {constructor: ƒ}
    // constructor: ƒ ()
    // [[Prototype]]: Object
    // 3
    Car.prototype.size = 1000;
    Car.prototype.play = function () {
        console.log('可以听课');
    }
    var car1 = new Car('benchi', 'pink', function () { console.log('fly') });
    var car2 = new Car('baoma', 'pink', function () { console.log('fly') });
    console.log(car1.size);//1000
    // 4
    console.log(car1.constructor);
    // 输出 构造函数
    // Car(name, color, run) {
    //     this.name = name;
    //     this.color = color;
    //     this.run = run;
    // }
    // 5
    console.log(Car.prototype.constructor);
    // 输出 构造函数
    // Car(name, color, run) {
    //     this.name = name;
    //     this.color = color;
    //     this.run = run;
    // }
    // 6
    console.log(car1.__proto__);
    //构造函数的原型
    // {size: 1000, play: ƒ, constructor: ƒ}