构造函数

构造函数
- 1.什么是构造函数
- 2.为什么要使用构造函数
- - 如何封装一个构造函数
- 3.构造函数的执行过程
- 4.构造函数的返回值
- 5.与普通函数的区别
- - 5.1调用方式的不同
  - 5.2 返回值不同
  - 5.3 作用的不同
原型对象
对象的封装
- 混合模式（构造函数+原型模式）
`__proto__`
- 原型链
继承
- 使用call()方法实现继承
- - 特点：
- 使用prototype实现继承
- 组合式继承

构造函数

1.什么是构造函数

定义：在js中，使用new关键字来调用的函数，被称为构造函数。

构造函数的作用：创建对象。

2.为什么要使用构造函数

假如需要创建多个类似的对象，我们会书写很多重复的无意义代码。此时我们使用构造函数，方便快捷的创建一个对象。

如何封装一个构造函数

将一个对象的特征作为属性，将它的行为作为方法。

function Dog(name,age,breed,color){this.name = name;this.age = age;this.breed = breed;this.color = color;this.show = function () {alert("我只是一只小" + this.breed + "啊！")}this.bark = function () {alert("汪汪汪！")}
}

【注意】构造函数的名字首字母大写。

3.构造函数的执行过程

function Animal(color){this.color = color;
}

当一个函数创建完成后，我们并不知道它是不是一个构造函数。像上面案例中，即使函数名首字母大写，我们也不确定它是构造函数。只有当一个函数前用new关键字来调用时，我们才能说它是一个构造函数。

var dog = new Animal("black")

构造函数的执行过程有以下4个步骤。

当用new关键字调用构造函数时，会开辟一个新的内存空间，这个内容空间就是新的对象实例。
将构造函数内部的this指向当前的内存空间（新的对象）。
执行函数内的代码。（对象的属性和方法的赋值。）
将内存空间的地址作为返回值返回。

4.构造函数的返回值

构造函数不需要手动添加返回值，默认返回新对象的内存地址。

（1）手动添加一个基础数据类型的返回值，最终还是返回新对象的内存地址。

function Person(name){this.name = name;return "蔡徐坤";
}
var p = new Person("范丞丞");
console.log(p.name);//范丞丞

（2）手动添加一个复合数据类型的返回值，返回手动添加的对象的内存地址。

function Person(name){this.name = name;return {name:"蔡徐坤"};
}
var p = new Person("范丞丞");
console.log(p.name);//蔡徐坤

5.与普通函数的区别

5.1调用方式的不同

普通函数使用函数名调用

构造函数通过new关键字来调用

5.2 返回值不同

普通函数的返回值是函数内return的结果

构造函数的返回值是函数内创建对象的地址。

5.3 作用的不同

构造函数时专门用来创建对象。

普通函数的作用可以自由定义。

原型对象

我们创建的每一个函数都有一个prototype属性，这个属性指向一个对象。而这个对象所有的属性和方法都会被构造函数拥有。

function Dog(name,age){this.name = name;this.age = age;
}
var dog1 = new Dog("来福",3)
var dog2 = new Dog("常威",2)
Dog.prototype.bark = function () {alert("汪汪汪！")
}
Dog.prototype.breed = "哈士奇";
alert(dog1.bark===dog2.bark);//true
alert(dog1.breed)//哈士奇
alert(dog2.breed)//哈士奇

对象的封装

一般情况下，公共属性定义到构造函数里面，公共的方法定义到原型对象身上。

混合模式（构造函数+原型模式）

        function Dog(name,age,breed,color){this.name = name;this.age = age;this.breed = breed;this.color = color;}Dog.prototype.show = function () {alert("我只是一只小" + this.breed + "啊！")}Dog.prototype.bark = function () {alert("汪汪汪！")}

`proto`

每一个对象都有一个属性__proto__，这个属性指向构造函数的prototype,也就是构造函数的原型对象。我们之所以可以在对象中使用原型对象中的方法和属性就是因为对象中有__proto__属性的存在。

原型链

如果实例对象中调用了该对象没有的方法或属性，去__proto__去找方法或属性，如果还没有则继续往上寻找，直到null。

继承

面上对象的三大特性：封装（封装构造函数），继承，多态

ES6之前没有给我们提供 extends 继承。我们可以通过构造函数+原型对象的模式去模拟实现继承。这种方法也被称为组合继承。

function Dog(age){this.age = age;
}
Dog.prototype.bark = function(){alert("汪汪汪！")
}
function Huskie(name,age){this.name = name;this.age = age;
}
Huskie.prototype.bark = function(){alert("汪汪汪！")
}

像上面的案例中，哈士奇是属于狗的一种，如果我们重复定义了一样的属性和方法，写了一些重复的代码也造成了资源的浪费，所以我们让哈士奇继承狗的所有属性和方法。

使用call()方法实现继承

function Dog(age){this.age = age;
}
Dog.prototype.swimming = function(){alert("会游泳！")
}
function Huskie(name,age){Dog.call(this,age);this.name = name;
}
var hsq = new Huskie("二哈",2);
hsq.swimming();//报错

特点：

该方式是靠调用需要继承的构造函数来实现的，调用过程中使用call方法来改变this的指向。
call是不可以继承父对象原型中的属性和方法。
call是只能继承构造函数中的属性和方法。

优点：继承了父类构造函数中所有的属性和方法

缺点：不能继承父类原型对象中的属性和方法

使用prototype实现继承

在原型对象中有一个constructor属性，该属性指向该原型对象的构造函数。

function Dog(age){this.age = age;}Dog.prototype.bark = function(){alert("汪汪汪！")}function Huskie(name,age){this.name = name;}// 这样写相当于让子类与父类指向了同一个原型对象。如果修改了子类的原型对象，则父类的原型对象也会随之修改// Huskie.prototype = Dog.prototype;Huskie.prototype = new Dog(3);Huskie.prototype.constructor = Huskie;// var h = new Huskie("二哈");// console.log(h.age);// h.bark(); // var dog = new Dog();// console.dir(dog)// console.dir(h.constructor === h.__proto__.constructor); true

优点：继承了父级原型上的属性和方法

缺点：实现化多个子类时，必须使用共同的属性值。

组合式继承

function Dog(age){this.age = age;
}
Dog.prototype.bark = function(){alert("汪汪汪！")
}
function Huskie(name,age){Dog.call(this,age);this.name = name;
}
//此时不需要给父类添加参数
Huskie.prototype = new Dog();
Huskie.prototype.constructor = Huskie;
var h = new Huskie("二哈",5);
console.log(h.age);
h.bark();

面向对象；构造函数；原型对象相关推荐

JS高级进阶总结day01---面向对象编程介绍,new的工作原理以及构造函数,原型对象,实力函数三者之间的关系
02-面向对象编程 1.1-面向对象编程介绍本小节知识点 1.理解什么是面向对象编程面向对象不是一门技术,而是一种解决问题的思维方式面向对象的本质是对面向过程的一种封装 2.理解什么是对象对象 ...
构造函数原型对象对象实例图
转载于:https://www.cnblogs.com/chris-oil/p/3334445.html
面向过程和面向对象的编程思想复习原型构造函数和实例对象和原型对象之间的关系
体会面向过程和面向对象的编程思想 <!DOCTYPE html> <html lang="en"> <head><meta charset ...
JavaScript 面向对象编程（二） —— 构造函数 / 原型 / 继承 / ES5 新增方法
本篇为 JavaScript 进阶 ES6 系列笔记第二篇,将陆续更新后续内容.参考:JavaScript 进阶面向对象 ES6 :ECMAScript 6 入门 : Javascript 继承机制的 ...
JavaScript进阶-编程思想、构造函数的原型对象、对象原型、原型继承以及原型链
编程思想面向过程面向过程就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候再一个一个的依次调用就可以了. 优点: 性能比面向对象高,适合跟硬件联系很紧密的东西,例如单 ...
35 利用构造函数和原型对象实现继承
技术交流QQ群:1027579432,欢迎你的加入! 欢迎关注我的微信公众号:CurryCoder的程序人生 1.概述 ES6之前并没有给我们提供extends继承,我们可以通过构造函数+原型对象模拟 ...
[转]JavaScript构造函数及原型对象
JavaScript中没有类的概念,所以其在对象创建方面与面向对象语言有所不同. JS中对象可以定义为"无序属性的集合".其属性可以包含基本值,对象以及函数.对象实质上就是一组没有 ...
构造函数、实例、原型对象、继承
一.构造函数与原型对象之间的关系: 有一个Star构造函数,每一个构造函数里面都有一个原型对象,是通过构造函数的prototype指向这个原型对象的同样在这个原型对象里面也有一个属性叫constru ...
JavaScript——面向对象之继承（原型对象）与多态（重载、重写）
继承与多态引入问题一.继承 1. 步骤 (1) 找到所有子对象共同的父对象 (2) 将所有子对象公共的方法定义添加到共同的父对象中 (3) 所有子对象因继承关系而直接使用父对象中公共的方法 2. ...

面向对象；构造函数；原型对象

构造函数

构造函数

1.什么是构造函数

2.为什么要使用构造函数

如何封装一个构造函数

3.构造函数的执行过程

4.构造函数的返回值

5.与普通函数的区别

5.1调用方式的不同

5.2 返回值不同

5.3 作用的不同

原型对象

对象的封装

混合模式（构造函数+原型模式）

`proto`

原型链

继承

使用call()方法实现继承

特点：

使用prototype实现继承

组合式继承

面向对象；构造函数；原型对象相关推荐

最新文章

热门文章

面向对象；构造函数；原型对象

构造函数

构造函数

1.什么是构造函数

2.为什么要使用构造函数

如何封装一个构造函数

3.构造函数的执行过程

4.构造函数的返回值

5.与普通函数的区别

5.1调用方式的不同

5.2 返回值不同

5.3 作用的不同

原型对象

对象的封装

混合模式（构造函数+原型 模式）

__proto__

原型链

继承

使用call()方法实现继承

特点：

使用prototype实现继承

组合式继承

面向对象；构造函数；原型对象相关推荐

最新文章

热门文章

混合模式（构造函数+原型模式）

`proto`