构造函数和原型

目录

1. 构造函数和原型

1.1 概述

1.2 构造函数

1.3 构造函数的问题

1.4 构造函数原型 prototype

1.5 对象原型 __proto__

1.6 constructor 构造函数

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

1.8 原型链

1.9 JavaScript 的成员查找机制(规则)

1.10 原型对象this指向

1.11 扩展内置对象

2. 继承

2.1 call()

2.2 借用构造函数继承父类型属性

2.3 借用原型对象继承父类型方法

3. ES5 中的新增方法

3.1 ES5 新增方法概述

3.2 数组方法

3.3查询商品案例

3.4字符串方法

3.5对象方法

---

#博学谷IT学习技术支持#

1. 构造函数和原型

1.1 概述

在 ES6之前 ，对象不是基于类创建的，而是用一种称为构建函数 的特殊函数来定义对象和它们的

特征。

创建对象可以通过以下三种方式：

1. 对象字面量

2. new Object()

3. 自定义构造函数

代码演示：

    <script>
        // 创建对象可以通过以下三种方式：
        //1、字面量
        var obj = {
            name: 'red',
            age: 18,
            say: function () {
                alert('你好');
            }
        };
        //2、自定义构造函数
        function Person(name, age) {
            this.name = name;
            this.age = age;
            this.say = function () {
                console.log('你好');
            }
        }
        var person = new Person('red', 18);
        //3、new Object()
        var newObj = new Object();
        newObj.name = 'red';
        newObj.age = 18;
        newObj.say = function () {
            console.log('hahaha');
        };
    </script>

创建数组的两种方式：

1、数组字面量

2、new Array( ）；

代码演示：

    <script>
        //创建数组的两种方式
        //1、数组字面量
        var arr = [1,2,3];
        // console.log(arr);
        //2、new Array();
        var newArr = new Array(1,2,3);
        // console.log(newArr);
    </script>

1.2 构造函数

构造函数是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与 new 一

起使用。我 们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。

注意：

1. 构造函数用于创建某一类对象，其首字母要大写

2. 构造函数要和 new 一起使用才有意义

new 在执行时会做四件事情：

① 在内存中创建一个新的空对象。

② 让 this 指向这个新的对象。

③ 执行构造函数里面的代码，给这个新对象添加属性和方法。

④ 返回这个新对象（所以构造函数里面不需要 return ）。

JavaScript 的构造函数中可以添加一些成员，可以在构造函数本身上添加，也可以在构造函数内部

的 this 上添 加。通过这两种方式添加的成员，就分别称为 静态成员和 实例成员。

静态成员：在构造函数本上添加的成员称为静态成员，只能由构造函数本身来访问

实例成员：在构造函数内部创建的对象成员称为实例成员，只能由实例化的对象来访问

代码演示：

    <script>
        // 静态成员和实例成员

        function Person(name, age) {
            // 实例成员
            this.name = name;
            this.age = age;
            this.height = 120;
            this.say = function () {
                console.log('你好');
            }
        };
        // 静态成员
        Person.weight = 120;
        var person = new Person('red', 18);
        // console.log(Person);
        console.log(Person.weight);  //120
        console.log(person.weight);  //undefined
        console.log(Person.height);  //undefined
    </script>

1.3 构造函数的问题

构造函数方法很好用，但是存在浪费内存的问题。

function Star(uname, age) {
 this.uname = uname;
 this.age = age;
 this.sing = function() {
 console.log('我会唱歌');
}}
var ldh = new Star('刘德华', 18);
var zxy = new Star('张学友', 19);

每次实例化对象，就会开辟一个新区间，浪费资源 

1.4 构造函数原型 prototype

构造函数通过原型分配的函数是所有对象所共享的。

JavaScript 规定，每一个构造函数都有一个 prototype 属性，指向另一个对象。注意这个 prototype

就是一 个对象，这个对象的所有属性和方法，都会被构造函数所拥有。

我们可以把那些不变的方法，直接定义在 prototype 对象上，这样所有对象的实例就可以共享这些

方法。

代码演示：

    <script>
        // 构造函数原型 prototype
        function Person(name, age) {
            this.name = name;
            this.age = age;
            this.say = function () {
                console.log('你好');
            }
        };
        var person = new Person('red', 18);
        console.log(Person.prototype);
    </script>

演示结果：

在构造函数的原型对象中包括：

1、构造函数，包括了属性和方法

2、原型 对象Object

我们接着演示Object到底是神么？

代码演示：

    //new Object()
        var newObj = new Object();
        newObj.name = 'red';
        newObj.age = 18;
        newObj.say = function () {
            console.log('hahaha');
        };
        console.log(Object.prototype);

演示结果：