原型 原型链 call / apply

原型定义:

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

用下面的代码来展现下什么是原型

//Person.prototype        --    原型
//Person.prototype  = {}      是祖先
Person.prototype.LastName = "haha";
Person.prototype.say = function () {console.log('abcd');
}
function Person (name, age, sex) {this.name = name;this.age = age;this.sex = sex;
}
var person1 = new Person('xuming', 35, 'male');
var person2 = new Person();
//person1和person2都可以访问祖先的LastName属性

原型是怎么来用的呢?

1-提取共有属性

//当我们每次构造一个新的对象时,下面的这些共有属性都要执行一遍,造成冗余
function Car(color, owner) {this.owner = owner;this.carName = 'BMW';this.height = 1400;this.lang = 4900;this.color = color;
}var car = new Car('red', 'prof.ji');

 

//修改上面的冗余    提取公共属性
Car.prototype.carName = 'BMW';
Car.prototype.lang = 4900;
Car.prototype.height = 1400;
function Car(color, owner) {this.owner = owner;this.color = color;
}var car = new Car('red', 'prof.ji');//或者用更简单的方式
Car.prototype = {carName = 'BMW',lang = 4900,height = 1400
}
function Car(color, owner) {this.owner = owner;this.color = color;
}var car = new Car('red', 'prof.ji');

2-constructor

//当我们构造这样一个对象时,会自带一个prototype属性,prototype属性里有自带两个属性,
//即
//prototype = {
//    constructor:系统产生的,默认指向自己
//    _proto_
//}
function Car() {
//    constructor:Car
}var car = new Car();

3-隐式属性 __proto__

//当我们定义一个对象{}的时候,里面其实并不是空的
//系统已经有一个隐式的__proto__,它指向当前自己的  xxx.prototype
function Persin() {//var this = {//    __proto__:Person.prototype      //}
}=====================================================================================//问题1   person.name打印啥?
Person.prototype.name = 'sunny';
function Person() {//    __proto__:Person.prototype 
}
var person = new Person();
Person.prototype.name = 'cherry';
console.log(person.name)   //打印cherry=====================================================================================//问题2   person.name打印啥?
Person.prototype.name = 'sunny';
function Person() {//    __proto__:Person.prototype 
}
var person = new Person();
Person.prototype = {name : 'cherry'
}console.log(person.name)   //打印sunny========================================================================================
//原因:重点是这里有一个隐式的间接过程Person.prototype = {name : 'sunny'}
__proto__ = Person.prototype;
Person.prototype = {name: 'cherry'}=====================================================================================//问题3   person.name打印啥?
Person.prototype.name = 'sunny';
function Person() {//    __proto__:Person.prototype 
}Person.prototype = {name : 'cherry'
}var person = new Person();
console.log(person.name)   //打印cherry

 

原型链

原型链的最顶端是Object,它就没有__proto__属性了。它的孩子都有。

Grand.prototype.lastName = "Deng";
function Grand () {}var grand = new Grand();Father.prototype = grand;
function Father() {this.name = 'xuming'
}
var father = new Father();Son.prototype = father;
function Son() {this.hobbit= 'smoke'
}
var son = new Son();

原型链增删改查

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

Object.create(原型);()里可以填两种值:原型和null

Object.create(null)创建数出来的对象是没有继承自Object.prototype的,但是Object.create(原型)创建出来的对象是有继承的

 

call / apply改变this指向(借用别人的函数实现自己的功能)

call()   //系统默认第一个参数用以改变this指向,第二个参数开始和形参一一对应

function Person(name,age) {this.name = name;this.age = age;
}var person = new Person('deng', 100);var obj = {}Person.call();     //此时相当于Person()//但是call可以传参一个对象,如下
Person.call(obj); //此时Person里的this改变了指向,指向obj,而不是person//call()   //系统默认第一个参数用以改变this指向,第二个参数才开始和形参一一对应

apply和call几乎一模一样,唯一不同的是:

call     可以传无限个参数,需要把实参按照形参的个数一个一个传进去

apply  只能传两个参数,一个改变this指向,一个封装好参数列表的数组arguments,(其实就是把一个一个的参数封装成数组传过去)

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/413371.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Open-Falcon 监控系统监控 MySQL/Redis/MongoDB 状态监控

背景: Open-Falcon 是小米运维部开源的一款互联网企业级监控系统解决方案,具体的安装和使用说明请见官网:http://open-falcon.org/,是一款比较全的监控。而且提供各种API,只需要把数据按照规定给出就能出图&#xff0c…

最详细的后缀数组

写在前面: 多余的我就不提了,只是觉得网上的博客吧流程,每个数组存的是下标还是值,都讲的不是很清楚(让我这种蒟蒻很是困扰) 相信到现在这种水平的都可以知道什么是倍增,为什么能倍增都比较清楚…

HTML5 Web 存储(localStorage和sessionStorage)

localStorage生命周期是永久,除非主动清除localStorage信息,否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端(即浏览器)中保存,不参与和服务器的通信。 // 1、保存数据到本地// 第一个参数是保存的…

面向对象之反射、包装、(定制)

什么是反射? 反射的概念是由Smith在1982年首次提出的,主要是指程序可以访问、检测和修改它本身状态或行为的一种能力(自省), 这一概念的提出很快引发了计算机科学领域关于应用反射的研究。它首次被程序语言的设计领域所…

Error: Cannot find module 'webpack-cli'--解决方案

npm install webpack-cli -g 全局安装解决 今日赠语: 哈佛大学研究心理学表示: 1、床乱糟糟的人,比穿整洁的人,创造力平均要高出50% 2、经常迟到的人,比不迟到的人,幽默感平均要高出70% 3、饭量大的人&…

分享菜单效果

分享菜单效果&#xff1a; 1 <!DOCTYPE html>2 <html lang"en">3 <head>4 <meta charset"UTF-8">5 <title>分享菜单</title>6 <style>7 #div1{width: 100px; height: …

vue axios解决post传参数问题

我相信遇到这个问题的兄弟们&#xff0c;不带参数的情况下都是没有问题吧&#xff0c; 如果有问题&#xff0c;百度吧&#xff0c;好解决&#xff0c;答案都比较靠谱 这里主要针对带参数的情况&#xff0c;坑多 另外&#xff0c;我默认你用postman带参测试接口是没问题的 不…

Spring Boot实践——基础和常用配置

借鉴&#xff1a;https://blog.csdn.net/j903829182/article/details/74906948 一、Spring Boot 启动注解说明 SpringBootApplication开启了Spring的组件扫描和Spring Boot的自动配置功能。实际上&#xff0c; SpringBootApplication将三个有用的注解组合在了一起。 Spring的Co…

[css] 什么是hack?css的hack有哪些?

[css] 什么是hack&#xff1f;css的hack有哪些&#xff1f; 一、总结 1、CSS hack&#xff1a;由于不同厂商的浏览器&#xff0c;比如Internet Explorer,Safari,Mozilla Firefox,Chrome等&#xff0c;或者是同一厂商的浏览器的不同版本&#xff0c;如IE6和IE7&#xff0c;对CS…

Element组件 Drawer 抽屉的关闭问题

场景 我使用的Drawer 抽屉是从上往下开的效果&#xff0c;点击搜索图标&#xff0c;从上往下开没问题&#xff0c;输入关键字搜索&#xff0c;搜索出来的列表放置于搜索栏下面&#xff0c;所以使用了一个子组件 问题就来了 搜出来的列表item&#xff0c;点击任意一条&#x…

First Steps with TensorFlow代码解析

注&#xff1a;本文的内容基本上都摘自tensorflow的官网&#xff0c;只不过官网中的这部分内容在国内访问不了&#xff0c;所以我只是当做一个知识的搬运工&#xff0c;同时梳理了一遍&#xff0c;方便大家查看。本文相关内容地址如下&#xff1a; https://developers.google.c…

宝塔nginx运行vue项目刷新404问题解决

我的项目是webpack构建的&#xff0c;因为我做一切开发都想要希望要从一个标准的构建去编码 所以&#xff0c;我的项目在node下运行&#xff0c;开发&#xff0c;调试是没有一点问题的&#xff0c;npm run build也是完全OK的&#xff0c;vue路由是history模式 把build出来的d…

vscode设置中文,设置中文不成功问题

刚安装好的vscode界面显示英文&#xff0c;如何设置中文呢&#xff1f; 在locale.json界面设置”locale":"zh-cn"也未能实现界面为中文&#xff0c;在网上找了参考了&#xff0c;以下教程真实测试有效&#xff01; 首先&#xff1a; 下载插件&#xff1a;Chines…

网页Request Headers请求头和Response Headers响应头

Request Headers Accept:告诉服务器&#xff0c;客户机支持的数据类型 Accept-Encoding:告诉服务器&#xff0c;客户机支持的数据压缩格式 Cache-Control&#xff1a;缓存控制&#xff0c;服务器通过控制浏览器要不要缓存数据 Connection:处理完这次请求&#xff0c;是断开…

springboot+jpa+mysql+redis+swagger整合步骤

springbootjpaMySQLswagger框架搭建好之上再整合redis&#xff1a; 在电脑上先安装redis&#xff1a; 一、在pom.xml中引入redis 二、在application.yml里配置redis&#xff0c;单独说明&#xff1a;redis刚一开始安装好是没有设置密码的。否则&#xff0c;会报connection错误。…

python3下使用requests实现模拟用户登录 —— 基础篇(马蜂窝)

我是从这篇博客中&#xff08;https://blog.csdn.net/zwq912318834/article/details/79571110&#xff09;了解的一点基础东西&#xff0c;代码都是从这篇博客里面的源代码直接复制过去测试和学习的。 遇到的问题&#xff1a; 1、返回状态码&#xff1a;502——百度得知这是一…

ACM-ICPC 2018 焦作赛区网络预赛 H题 String and Times(SAM)

Now you have a string consists of uppercase letters, two integers AA and BB. We call a substring wonderful substring when the times it appears in that string is between AA and BB (A \le times \le BA≤times≤B). Can you calculate the number of wonderful sub…

[css] css的height:100%和height:inherit之间有什么区别呢?

[css] css的height:100%和height:inherit之间有什么区别呢&#xff1f; 上周在微博上无节操吐槽了下inherit的段子&#xff0c;没想到回声还不少&#xff1a; 微博inherit无节操段子 不过inherit确实是个好东西&#xff0c;不仅节约代码&#xff0c;尤其与background之流打交…

http详解 请求报文格式和响应报文格式

题外话&#xff1a; 《Pi Network 免费挖矿国外热门项目 一个π币大约值3元到10元》相信过去BTC的人&#xff0c;信不信未来的PI&#xff0c;了解一下&#xff0c;唯一一个高度与之持平的项目 HTTP 工作原理 超文本传输协议(Hypertext Transfer Protocol&#xff0c;简称HTT…

【LeetCode】拓扑排序

【207】 Course Schedule 排课问题&#xff0c;n门课排课&#xff0c;有的课程必须在另外一些课程之前上&#xff0c;问能不能排出来顺序。 题解&#xff1a;裸的拓扑排序。参考代码见算法竞赛入门指南这本书。 1 class Solution {2 public:3 bool dfs(const vector<vec…