原型 原型链 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…

[css] 使用css实现悬浮提示文本

[css] 使用css实现悬浮提示文本 <div class"tips-demo" data-tips"提示文本">演示文本</div><style> .tips-demo {position: fixed;bottom: 15px;right: 15px; }.tips-demo:after {content: attr(data-tips);position: absolute;top: 0…

JavaScript之继承模式,命名空间,对象枚举

继承发展史 1-传统形式 → 原型链 过多的继承了没用的属性&#xff08;很好理解&#xff0c;不用代码演示了&#xff09; 2-借用构造函数 不能继承借用构造函数的原型&#xff08;很好理解&#xff0c;不用代码演示了&#xff09;每次构造函数都要夺走一个函数&#xff08;很…

delphi dxBarManager 的dxBarEdit 输入问题

Developer Express 6 想做像office2007那样界面.问题:dxBarManager1 里面添加了cxBarEditItem1 这是个文本框,运行可以输入内容,但是当焦点失去时,刚刚输入的内容没了.只能每次输完内容后一定要按回车才能保存内容.这里面所有能改变值的控件都是这样子的,有没有什么办法可以在控…

[css] 怎么设置可点击的元素上强制手型?

[css] 怎么设置可点击的元素上强制手型&#xff1f; cursor 属性个人简介 我是歌谣&#xff0c;欢迎和大家一起交流前后端知识。放弃很容易&#xff0c; 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题

什么是KYC,KYC认证的重要性

KYC&#xff0c;是英语Know Your Customer的简称&#xff0c;这段词汇用翻译直接生硬的翻译过来意思是&#xff1a;了解你的客户。词义翻译的非常的直接。不过却缺乏一些诗意。我们在万能的度娘上键入KYC得到的解释是&#xff1a;是金融机构、银行、交易所等企业必须进行的一项…

虚拟机上的Linux学习

title: 虚拟机上的Linux学习 date: 2018-08-08 15:48:28 updated: tags: [Linux,学习笔记] description: keywords: comments: image: --- 开始学习Linux了,还没有掌握系统完全备份的技术,所以不敢直接在物理机器上安装Linux,我选择使用虚拟机安装. 使用虚拟机安装Linux 最开始…

[css] 如何使用css实现跨浏览器的最小高度?

[css] 如何使用css实现跨浏览器的最小高度&#xff1f; div{height:auto!important; height:200px; min-height:200px; } 这个第一个已经 important 了&#xff0c;后面的属性设置应该也没用了吧 浏览器兼容接触的比较少了&#xff0c;目前项目只兼容 blink个人简介 我是歌谣&…

Promise解决多个异步Ajax请求导致的代码嵌套问题(完美解决方案)

这篇文章主要介绍了用Promise解决多个异步Ajax请求导致的代码嵌套问题(完美解决方案),需要的朋友可以参考下 问题 前端小同学在做页面的时候&#xff0c;犯了个常见的错误&#xff1a;把多个Ajax请求顺序着写下来了&#xff0c;而后面的请求&#xff0c;对前面请求的返回结果…

[css] 使用css3实现一个斑马线的效果

[css] 使用css3实现一个斑马线的效果 ferrinweb 如果需要很多或者无限扩展的斑马线&#xff0c;你这个方案就有缺点了 cxwht 你的方案需要增加额外的元素&#xff0c;不太理想 最好的办法是用渐变背景实现 linear-gradient( [ [ <angle> | [top | bottom] || [left | ri…

最详细的后缀数组

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

promise简单封装ajax 完美嵌套多个ajax请求

转载请注明出处并留个言哈&#xff0c;分享快乐~&#xff01; request.js文件&#xff0c;注意网页头部script标签加载顺序 function myAjax(json, callback) {var p new Promise(function (resolve, reject) {$.ajax({url: json.url, //请求的url地址dataType: json.dat…

[css] 使用纯css来创建一个滑块

[css] 使用纯css来创建一个滑块 .checke{position: relative;-webkit-appearance: none;width:90px;height: 44px;line-height: 44px;background: #eee;border-radius: 30px;outline: none;}.checke:before{position: absolute;left: 0;content: ;width: 44px;height: 44px;bor…

纯静态网站模板封装header和footer

前后端分离的网站模板&#xff0c;如果不用任何渲染引擎&#xff0c;能否封装公共的header和footer&#xff08;或其它html公共代码呢&#xff09;&#xff1f; 答案是肯定的&#xff0c;因为jQuery有一个函数叫 load &#xff0c;可以在浏览器绘制页面之前加载完整的 html 页…

SAP字体调节大小

登陆SAP 之后&#xff0c;菜单下面一行&#xff0c;最右边的那个彩色按钮&#xff08;SAP GUI&#xff09;&#xff0c;点击“选项”-可视设计-字体设计-固定狂赌字体设计&#xff0c;点击&#xff1a;选择字体 即可。转载于:https://www.cnblogs.com/RogerLu/p/9612648.html

javascript中对一个对象数组按照对象某个属性进行排序

在javascript中&#xff0c;对象和数组是两种不同的类型&#xff0c;这和php中的数组概念不同。在javascript中&#xff0c;也有一些精妙的算法&#xff0c;用来对一些对象进行排序。我在面试迅雷的时候&#xff0c;也拿到一道题&#xff0c;当时做题的时候考虑到时间&#xff…

[css] 用css画一个五边形和一个六边形

[css] 用css画一个五边形和一个六边形 五边形&#xff1a;clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); 六边形&#xff1a;clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); 七边形&#xff1a;clip-path: polygon(50% 0%…

[css] 你有没有使用过“形似猫头鹰”(例:`* + *{ ... }`) 的选择器?

[css] 你有没有使用过“形似猫头鹰”&#xff08;例&#xff1a;* *{ ... }&#xff09; 的选择器&#xff1f; 以前常用&#xff0c;比如li li {margin-top: 1rem; } 这样可以给除了第一个li以外的li指定样式&#xff0c;比如在两个li之间加上margin个人简介 我是歌谣&…

HTML5 Web 存储(localStorage和sessionStorage)

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

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

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