当前位置: 首页 > news >正文

js --- 面向对象之原型与原型链

前言:

每个构造函数都有一个原型对象(prototype),原型对象都包含一个指向构造函数的指针,而实例(instance)都包含一个指向原型对象的内部指针__proto__.

原型定义:Person.prototype

  1. 原型是function对象的一个属性,它定义了构造函数实例的公共祖先。
  2. 通过构造函数产生的实例,可以继承该原型的属性和方法。
  3. 原型也是对象。
  4. 利用原型的特点和概念,可以提取共有属性。
  5. 实例创建的时候会隐形创建一个属性__proto__,指向原型;对象查看原型方法:对象.__proto__
  6. 原型有一个预定义属性constructor,指向构造函数;对象查看其构造函数:对象.constructor
Person.prototype.country="中国";
Person.prototype.city="北京";
function Person(name,age,sex){
  this.name = name;
  this.age = age;
  this.sex=sex;
}
var person1 = new Person('li',23,'女');
var person2 = new Person('liu',33,'男');

console.log(person1.name + "来自" +person1.country);
console.log(person2);
console.log(person2.name + "来自" +person2.country);
person2.country="美国";
console.log(person2.name + "来自" +person2.country);
console.log(person2);

控制台结果

分析:

通过同一个构造函数可以创建多个相同但独立的个体,每个个体都继承了构造函数的所有属性和方法,某个体属性改变不影响其他个体;

原型不可通过对象来改变,只能通过构造函数自身改变;

原型链:

Grand.prototype.lastName = "li";
function Grand(){

}
var grand = new Grand();

Father.prototype = grand; 
//Father.prototype被重写,导致Father.prototype.constructor也一同被重写,
function Father(){
	this.name = 'dede';
}
var father = new Father();

Son.prototype = father; //Son.prototype被重写,导致Son.prototype.constructor也一同被重写
function Son(){
	this.age = 23;
}
var son = new Son();

console.log(son.age);
console.log(son.name);
console.log(son.lastName);

//最后son的构造函数变为Grand()

控制台打印结果

关于toString

1:
undefined.toString() //报错  Cannot read property 'toString' of undefined
null.toString() //报错  Cannot read property 'toString' of null
var obj = Object.create(null)
null.toString() //报错
//原因undefined、null、create创建的对象没有原型

2:
true.toString() //"true"

3:
123.toSting() //报错  Uncaught SyntaxError: Invalid or unexpected toke
//原因 : .是数字运算符,具有高优先级,系统默认数字.后面应该带有数字

var num=123
num.toSting() // "123"

call()/apply():调用别人的方法实现自己的功能

call()

function Person(name, sex, age) {
	this.name = name;
	this.sex = sex;
	this.age = age;
}
function Student(name, sex, age, tel, grade) {
	Person.call(this, name, sex, age) // 调用Person方法,传入的this指向Student
	this.tel = tel;
	this.grade = grade;
}

apply():

function Person(name, sex, age) {
	this.name = name;
	this.sex = sex;
	this.age = age;
}
function Student(name, sex, age, tel, grade) {
	Person.apply(this, [name, sex, age])
	this.tel = tel;
	this.grade = grade;
}

function foo() {
	bar.apply(null, arguments)
}
function bar() {
	console.log( arguments)
}
foo(1,2,3,4,5)

//打印结果为 [1,2,3,4,5]
//1.虽然没有形参,但有映射,不影响arguments值
//2.bar.apply(null, arguments) apply中第一参数为null 相当于 bar(arguments)

 

相关文章:

  • 对象枚举以及判断数组与对象的3种方法
  • git的小白入门
  • windows如何配置mysql的环境变量
  • js的变量类型判断和类型的转换
  • vscode 常用设置和插件
  • 可迭代对象和类数组
  • js数组遍历方法总结与对比
  • PAT乙级 我要通过(1003)的详细解答过程
  • PAT乙级 成绩排名(1004) c++题解
  • PAT乙级 继续(3n+1)猜想(1005) c++题解(打表越界的段错误)
  • PAT乙级 素数对猜想(1007)c++实现
  • PAT乙级 说反话(1009)c++新手易懂版
  • 图的深度遍历(邻接表)SCAU c++
  • 图的广度遍历(邻接表)SCAU c++
  • 堆排序 SCAU c++
  • 【RocksDB】TransactionDB源码分析
  • 78. Subsets
  • cookie和session
  • Cumulo 的 ClojureScript 模块已经成型
  • linux学习笔记
  • spring boot下thymeleaf全局静态变量配置
  • Spring Cloud(3) - 服务治理: Spring Cloud Eureka
  • Webpack4 学习笔记 - 01:webpack的安装和简单配置
  • 包装类对象
  • 服务器之间,相同帐号,实现免密钥登录
  • 基于Volley网络库实现加载多种网络图片(包括GIF动态图片、圆形图片、普通图片)...
  • 爬虫进阶 -- 神级程序员:让你的爬虫就像人类的用户行为!
  • 爬虫模拟登陆 SegmentFault
  • 深入体验bash on windows,在windows上搭建原生的linux开发环境,酷!
  • 手机端车牌号码键盘的vue组件
  • 我的业余项目总结
  • 怎么将电脑中的声音录制成WAV格式
  • 7行Python代码的人脸识别
  • ###51单片机学习(2)-----如何通过C语言运用延时函数设计LED流水灯
  • (4)通过调用hadoop的java api实现本地文件上传到hadoop文件系统上
  • (C语言)二分查找 超详细
  • (第61天)多租户架构(CDB/PDB)
  • (二十四)Flask之flask-session组件
  • (算法)N皇后问题
  • (一)为什么要选择C++
  • (原创)Stanford Machine Learning (by Andrew NG) --- (week 9) Anomaly DetectionRecommender Systems...
  • (转)德国人的记事本
  • .cfg\.dat\.mak(持续补充)
  • .Net IOC框架入门之一 Unity
  • .NET 设计模式初探
  • .NET/C# 使窗口永不获得焦点
  • .NET设计模式(11):组合模式(Composite Pattern)
  • /bin/rm: 参数列表过长"的解决办法
  • ??如何把JavaScript脚本中的参数传到java代码段中
  • @vue/cli脚手架
  • [2019.3.5]BZOJ1934 [Shoi2007]Vote 善意的投票
  • [23] 4K4D: Real-Time 4D View Synthesis at 4K Resolution
  • [C++基础]-入门知识
  • [CareerCup] 14.5 Object Reflection 对象反射
  • [ChromeApp]指南!让你的谷歌浏览器好用十倍!