保安日记：JavaScript学习第十六篇之Javascrip 面向对象--原型

本文主要是介绍保安日记：JavaScript学习第十六篇之Javascrip 面向对象--原型，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

原型对象

给对象加方法，可以理解为css中的class–给元素加样式

Array.prototype.sum = function () {
// 可以给系统的类添加原型方法
}

通常都是用构造函数加属性，用原型加方法

<script>//----构造函数function CreatePerson(name, qq) {  this.name = name;this.qq = qq;}//----原型CreatePerson.prototype.showName = function () {alert("我的名字是：" + this.name);};CreatePerson.prototype.showQQ = function () {alert("我的QQ是：" + this.qq);};var obj1 = new CreatePerson("张三", "12345678");var obj2 = new CreatePerson("张四", "87654131");obj1.showName();obj1.showQQ();</script>

对象原型 __proto

对象都会有一个属性_proto_原型指向构造函数的prototype原型对象

__proto__对象原型和原型对象prototype是等价的
__proto__对象原型的意义就在于为对象的查找机制提供一个方向，但是它是一个非标准属性，因此实际开发中，不可以使用这个属性，它只是内部指向原型对象prototype

      function CreatePerson(name, qq) {this.name = name;this.qq = qq;}CreatePerson.prototype = {// 多个方法可以以对象的形式储存，但是必须让这个属性只指向原来的构造函数，不然就被赋值了constructor: CreatePerson,showName: function () {alert("我的名字是：" + this.name);},showQQ: function () {alert("我的QQ是：" + this.qq);},};var obj1 = new CreatePerson("张三", "12345678");console.log(CreatePerson.prototype);console.log(obj1.__proto__);console.log(CreatePerson.prototype.constructor);console.log(obj1.__proto__.constructor);

构造函数、实例、原型对象三者关系

在这里插入图片描述

原型链

在这里插入图片描述

原型对象中this指向问题

function Star(name, qq) {this.name = name;this.qq = qq;}var that;Star.prototype.sing = function () {alert("i can sing");that = this;};var ldh = new Star("刘德华", 18);ldh.sing();console.log(that == ldh);
1.在构造函数中，this指向的是实例对象 ldh
2.原型对象函数里面的this 指向的是实例对象 ldh

扩展内置对象

可以通过原型对象，对原来的内置对象进行扩展自定义的方法

注意：数组和字符串内置对象不能给原型对象覆盖操作 Array.prototype = {xxxx},只能是 Array.prototype.xxx = function(){} 的方式

继承call() 方法

1.call() 可以调用函数

2.call()可以改变这个函数的this指向此时这个函数的this 就指向了o这个对象

<script>function fn(x, y) {console.log("hello,world");console.log(this);  //----{name: "andy"}console.log(x + y);}var o = {name: "andy",};fn.call(o, 1, 2); //---- 3</script>

3.借用构造函数继承父类型属性、方法

    <script>// 借用父构造函数继承属性;//1.父构造函数function Father(x, y) {this.x = x;this.y = y;}Father.prototype.money = function () {console.log(10000);};//2.子构造函数function Son(x, y) {Father.call(this, x, y);}Son.prototype = new Father(); //通过father创造的实例对象，让son原型对象等于实例对象，来获取father原型对象里的方法（实例对象通过__proto__方法获取father原型对象里的方法）//利用对象的形式修改了原型对象，需要用constructor 指回原来的构造函数Son.prototype.constructor = Son;var son = new Son("mike", 18);console.log(son); //----Son {x: "mike", y: 18}</script>