当前位置:首页 » 《随便一记》 » 正文

5.JavaScript原型链和继承_且听风呤dzq的博客

28 人参与  2021年11月09日 16:03  分类 : 《随便一记》  评论

点击全文阅读


JavaScript原型链和继承

文章目录

  • JavaScript原型链和继承
  • 一、原型
  • 二、原型链
    • 原型链图解
    • 了解this与call/apply方法
  • 三、继承


一、原型

1.定义:原型是 function 对象的一个属性,它定义了构造函数制造出的对象的公共祖
先。通过该构造函数产生的对象,可以继承该原型的属性和方法。原型也是对象。
2.利用原型特点和概念,可以提取共有属性。
3.对象属性的增删和原型上属性增删改查。
4.对象如何查看原型 ==> 隐式属性 __ proto __
5.对象如何查看对象的构造函数 ==> constructor。

自己身上有属性,原型上也有属性,取近的,用自己的

二、原型链

1、构成原型链

Grand.prototype.lastName = "dzq";
function Grand(){};
var grand = new Grand();//grand对象继承了祖先的的lastName属性
console.log(grand.lastName);

Father.prototype = grand;//将对象grand赋给Father的原型
function Father(){
    this.name = "lyh";
};
var father = new Father();//father就可以拿到lastName属性和它自己的name属性
console.log(father.lastName,father.name);

Son.prototype = father;//同理将对象father赋给Son的原型
function Son(){
     this.hehe = "txc";
};
var son = new Son();//son就能拿到lastName、name属性,和自己的hehe属性
console.log(son.lastName,son.name,son.hehe)

2、原型链上属性的增删改查
原型链上的增删改查和原型基本上是一致的。只有本人有的权限,子孙是没有的。

3、谁调用的方法内部 this 就是谁

4、绝大多数对象的最终都会继承自Object.prototype

5、Object.create(原型);
Object.create 也能创建对象。var obj = Object.create(这里必须要有原型)

6、原型方法上的重写
原型上有这个方法,我自己又写了一个和原型上同一名字,但不同功能的方法,叫
做重写(同一名字的函数,不同重写方式)
通过返回值,形参列表不同传参
同样的名实现不同功能的,就是重写

原型链图解

在这里插入图片描述

了解this与call/apply方法

this
1.函数预编译过程 this —>指向 window
2.全局作用域里 this —> 指向 window
3.obj.func(); func()里面的 this 指向 obj(谁调用这个函数this就指向谁)
4.call/apply 可以改变函数运行时 this 指向,它们两的区别,是后面传的参数形式不同。

call
直接执行 Person.call ( )和 Person ( )没有区别
Person.call( );括号里面可以传东西
如果 Person.call( obj );里面的 call 让 person 所有的 this 都变成 obj
不 new 的话,this 默认指向 window。call 的使用必须要 new
call 的第一位参数用于改变 this 指向,第二位实参(对应第一个形参)及以后的参数都当做正常的实参,传到形参里面去

function Person(name,age,sex){
	this.name=name;
	this,age=age;
	this.sex=sex;
}
function Student(name,age,sex,tel,grade){
	this.name=name;
	this.age=age;
	this.sex=sex;
	this.tel=tel;
	this.grade=grade;
}
var student =new Student("sunny","123","male",123,2000)
/*call 改变 this 指向,借用别人的函数,实现自己的功能。
只能在你的需求完全涵盖别人的时候才能使用
如果不想要 age 这个,就不能使用这种方法*/
function Person(name,age,sex){
	this.name=name;
	this,age=age;
	this.sex=sex;
}
function Student(name,age,sex,tel,grade){
	Person.call(this,name,age,sex)
	this.tel=tel;
	this.grade=grade;
}
/*Person.call(this, name, age, sex);里面的 this 现在是 new 了以后的 var this={}
利用 Person 方法,实现了 Student 自己的封装*/

apply
apply 也是改变 this 指向的,只是传参列表不同,第一位也是改变 this 指向的人,第
二位,apply 只能传一个实参,而且必须传数组 argunments
call 需要把实参按照形参的个数传进去

三、继承

继承发展史
1.传统形式 ==> 原型链
问题:过多的继承了没用的属性

2.借用构造函数 ==>利用 call、apply 所以不算标准的继承模式
1)不能继承借用构造函数的原型
2)每次构造函数都要多走一个函数 ==>浪费效率

3.共享原型(较好的继承方法)
不能随便改动自己的原型

Father.prototype.lastName = 'dzq';
function Father(){};
function Son(){};
Son.prototype = Father.prototype;//原型对象指向一个房间
var son = new Son();

圣杯模式
圣杯模式是在方法三的共有原型,但是在共有原型的基础上有改变。
共享原型是:son.prototype=father.prototype
圣杯模式是:另外加个构造函数 function F(){}当做中间层,然后让 F 和 father 共
有一个原型 F.prototype=father.prototype,然后 son.prototype = new F();使用原
型链形成了继承关系,现在改 son.prototype 就不会影响 father.prototype

var inherit = (function (){
	var F = function(){};//定义一个中间构造函数,私有化变量
	return function (target,origin){//target接受继承者,origin继承的目标
		F.prototype = origin.prototype;//将继承的目标原型对象赋给F.prototype
		target.prototype = new F();
		//new一个实例对象赋给接受继承的target
		//new后,Target.prototype指向的一个全新的地方
		//改变Target的原型链就不会影响到Origin
		target.prototype.constuctor = target;//将constructor指向自己
		target.prototype.uber = origin.prototype;//保存自己真正继承的目标,以便后期访问
	}
}());

点击全文阅读


本文链接:http://zhangshiyu.com/post/30695.html

原型  继承  对象  
<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1