本文主要介绍了web前端Javascript开发学习之javascript高级部分-面向对象，通过具体的内容向大家展现，希望对大家前端Javascript开发的学习有所帮助。

1.什么是面向对象？

面向对象是一种高度封装，目的在于提高代码的开发效率和可维护性。

2.面向对象的三大特性：继承性：子继承父；封装；多态：有多种功能；

3.面向对象和面向过程的区别：面向对象是找一个对象，指挥得结果；

面向过程就是亲力亲为，面面俱到，有条不絮；

面向对象是将执行者转变成指挥者；

面向对象不是面向过程的替代，而是面向过程的封装。

4.基本数据类型和复杂数据类型；

基本数据类型的数据保存在栈中：

复杂数据类型的数据保存在堆中；

5.创建对象的四种方法：

// 1.1字面量创建

        var obj = {};

        obj.age = 12;

        console.log(obj);

        // 1.2 new Object()

        var obj1 = new Object();

        obj1.age = 14;

        console.log(obj1);

        // 1.3 工厂函数创建

        function person(age) {

            var obj = new Object();

            obj.age = age;

            return obj;

        }

        console.log(person(18));

        // 1.4 构造函数创建

        function Person(age, name) {

            this.age = age;

            this.name = name;

            this.say = function() {

                console.log('hahaha');

            }

        }

        var person = new Person(35, 'lisi');

        console.log(person);

其中，构造函数，new 对象的过程分为以下几个步骤：1.创建一个新对象；2.将构造函数的作用域赋给新对象（this指向新对象），3.执行构造函数中的代码；4.返回新对象；

5.constructor属性

// 1.4 构造函数创建

        function Person(age, name) {

            this.age = age;

            this.name = name;

            this.say = function() {

                console.log('hahaha');

            }

        }

        var person = new Person(35, 'lisi');

        console.log(person);

在构造函数中，打印这个实例化对象，会发现里面有一个constructor属性，打印出来是

  ƒ Person(age, name) {

            this.age = age;

            this.name = name;

            this.say = function() {

                console.log('hahaha');

            }

        }

这就是构造函数本身；

6.instanceof 检测对象的类型

console.log(person instanceof Object);

打印person是否是对象，结果返回true

7.构造函数的问题；

内存浪费问题：

 function Person(age, name) {

            this.age = age;

            this.name = name;

            this.say = function() {

                console.log('hahaha');

            }

        }

        var person1 = new Person(35, 'lisi');

        var person2 = new Person(23,'zhangsan');

        var person3 = new Person(25,'wangwu');

如上代码所示，如果创建多个实例化对象，因为每个实例化对象的方法say都是一样的，但是因为每创建一个实例化对象，指针都不一样，导致最终的say方法也是不一样的（其实上应该是一样的），造成了内存资源的浪费，为了解决这一问题，把say方法定义到外面，解决数据共享问题。

   function say() {

            console.log('hahaha');

        }

        function Person(age, name) {

            this.age = age;

            this.name = name;

            this.say = say;

        }

        var person1 = new Person(35, 'lisi');

        var person2 = new Person(23, 'zhangsan');

        var person3 = new Person(25, 'wangwu');

        console.log(person1);

        console.log(person2);

但是这样做就又引发一个问题：声明在外面是全局作用域，容易引起全局命名冲突；

为了更好的解决这一问题，引出原型链；

8.javascript规定，每一个构造函数都有一个prototype属性，指向另一个对象，这个对象的所有属性和方法，都会被构造函数的实例继承，我们可以把所有对象实例需要共享的属性和方法直接定义到prototype对象上去。

 function Person(age, name) {

            this.age = age;

            this.name = name;

        }

        Person.prototype.say = function() {

            console.log('hahaha'); //构造函数prototype的属性，所对应的属性值会被构造函数的实例所继承

        }

        var person1 = new Person(35, 'lisi');

        var person2 = new Person(23, 'zhangsan');

        var person3 = new Person(25, 'wangwu');

        console.log(person1);

        console.log(person2);

        console.log(person1.say());

实例化对象内部包含一个指向构造函数的prototype对象的指针。proto,实例化对象的__proto__与构造函数的prototype是一样的。

   function Person(age, name) {

            this.age = age;

            this.name = name;

        }

        Person.prototype.say = function() {

            console.log('hahaha'); //构造函数prototype的属性，所对应的属性值会被构造函数的实例所继承

        }

        var person1 = new Person(35, 'lisi');

        var person2 = new Person(23, 'zhangsan');

        var person3 = new Person(25, 'wangwu');

        // console.log(drcPerson);

        console.log(person1.__proto__.constructor);

        console.log(Person.constructor);

        console.log(Person.prototype.constructor);

        console.dir(Person); 可以打印对象内容；

我是小职，记得找我

✅ 解锁高薪工作

✅ 免费获取基础课程·答疑解惑·职业测评