ES5-11原型与原型链深入、对象继承

原型

  • 谁调用,this就指向谁,当实例对象有该属性时,不会去原型上查找
    在这里插入图片描述
    在这里插入图片描述
  • 创建对象的两种方法:字面量、new Object()一般不用后面的
  • 二者创建出来的对象没有差异在这里插入图片描述

Object.create()

  • var 实例 = Object.create(对象/null)
  • 将对象或null作为实例的原型
    在这里插入图片描述
  • new构造函数的时候做了什么
  • 实例化对象
  • 调用构造函数的初始化属性和方法
  • 指定实例对象的原型在这里插入图片描述
  • 将null作为实例的原型,原型中将不包含任何属性!
  • 因此,不是所有对象都继承Object.prototype
    在这里插入图片描述
  • 无法查找到toString方法(没有__proto__)
    在这里插入图片描述
  • 手动增加的__proto__和自身的不一样,没有可以向上查找的原型链
    在这里插入图片描述
var obj = Object.create(null)
obj.num = 1;
var obj1 = {count: 2
}
obj.__proto__ = obj1;
console.log(obj.count) // undefined
obj.toString() // 报错
  • document.write接收字符串,当传入非String类型时,会先调用相应的toString方法

  • 原始值是没有属性的,基本包装类有属性和方法(有toString)

  • 除了undefined、null,其他的基本数据类型(Number、String、Boolean)都有自己的toSting方法
    在这里插入图片描述

  • 基本数据类型的toSting方法和Object.prototype的toSting方法不同
    在这里插入图片描述

原型链

  • 原型链的终点是Object.prototype

对象继承

  • 将父级的实例作为我的原型对象
function GrandFather() {this.name = '祖先'
}
var grandFatherObj = new GrandFather() // 将父级的实例作为我的原型对象function Father() {this.name = '父亲'
}
Father.prototype = grandFatherObj
var fatherObj = new Father()
function Child() {this.name = '孩子'
}
Child.prototype = fatherObj
var childObj = new Child()
console.log('祖先实例', grandFatherObj)
console.log('父亲实例', fatherObj)
console.log('孩子实例', childObj)
  • 祖先的实例中的__proto__指向祖先的原型对象,构造器指向构造函数GrandFather
  • 祖先原型对象里也有__proto__指向Object.prototype,构造器指Object构造函数
  • Object.prototype有toString方法
    在这里插入图片描述
  • 孩子实例修改父亲的引用数据类型的属性
    在这里插入图片描述
  • 孩子实例不能修改父亲的基本数据类型的属性
  • 对于++操作符 相当于student.students = 1 + student.students(先读取再赋值),会在孩子实例上创建这个属性
    在这里插入图片描述

调用方法时改变函数内this指向

call\apply\bind
方法.call(this指向的对象,参数…)
方法.apply(this指向的对象,arguments)
在这里插入图片描述

  • 插件计算器 方法写在prototype里更合适
; (function () {function Compute() {this.plus = function (a, b) {return a + b}this.minus = function (a, b) {return a - b}}function FullCompute() {Compute.call(this)this.multi = function (a, b) {return a * b}this.divide = function (a, b) {return a / b}}window.FullCompute = FullCompute
})()
var myFullCompute = new FullCompute()
console.log('加', myFullCompute.plus(8, 2)) // 10
console.log('减', myFullCompute.minus(8, 2)) // 6
console.log('乘', myFullCompute.multi(8, 2)) // 16
console.log('除', myFullCompute.divide(8, 2)) // 4
function Car(brand, color) {this.brand = brandthis.color = color
}
function Person(name, age) {this.name = namethis.age = agethis.printFn = function () {Car.call(this, 'Bentley', '黑')console.log(this.name + this.age + '岁的生日礼物是一辆' + this.color + '色的' + this.brand)}
}
var me = new Person('Stephy', 20)
me.printFn()
console.log('me', me)

在这里插入图片描述

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

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

相关文章

算法 --- 希尔排序、归并排序、快速排序的js实现

希尔排序: function shellSort(arr) {let len arr.length;let temp, gap 1;while(gap < len/3) {gap gap*3 1}while(gap >1) {for(let i gap;i< len; i) {temp arr[i];for( var j i-gap; j> 0 && arr[j] > temp; j - gap) {arr[j gap] arr[j];}…

苹果和虫子问题C++

如果需要转载&#xff0c;请注明出处&#xff1a;http://www.cnblogs.com/wongyi/p/8205305.html 最近在给小朋友补奥数课&#xff0c;顺便看了几道题目&#xff0c;觉得写出来会比较集中&#xff0c;整理一下哈哈哈。 问题如下&#xff1a; 苹果和虫子&#xff1a; 你买了一箱…

SQL SERVER 打开脚本报“未能完成操作,存储空间不足”

使用用SQLCMD命令行。 1、快捷键&#xff1a;winR 2、输入cmd​&#xff0c;确定 3、输入命令&#xff1a;sqlcmd -S <数据库服务器名称> -i C:\<脚本文件路径>.sql 例&#xff1a;sqlcmd -S lgsp_PC -i D:\test.sql P.S.1:最好在你的脚本中使用:use 数据库名(你要…

ES5-12 【utils】继承深入、call、apply、圣杯模式、模块化

继承深入 这两种方式继承不够合理&#xff08;为什么&#xff09; 将实例作为子类的原型 在子类的构造函数内部借用父类的构造函数 将父类的原型作为子类的原型&#xff08;会修改父类的原型&#xff09; css圣杯布局&#xff08;左右宽度固定、中间自适应&#xff09…

vue实现星级评价效果

希望对你们有用&#xff0c;已经自己试过可以的才发布出来的 效果如下&#xff1a; html&#xff1a; <template> <div class"evaStar"> <ul class"star"> <li v-for"(itemClass,index) in itemClasses" :class"itemC…

算法 --- 二叉树查找树的先序(中序、后序)遍历的js实现

结点: function Node(data, left, right) {this.data data;this.left left;this.right right;this.show show; }显示树的数据: function show(){return this.data; }二叉查找树: // Binary Search Tree function BST(){this.root null;this.insert insert; }添加结点到…

第三周学习

一直在练车&#xff0c;没有学习转载于:https://www.cnblogs.com/wj1998/p/9668534.html

IDEA的十大快捷键

Intellij IDEA中有很多快捷键让人爱不释手&#xff0c;stackoverflow上也有一些有趣的讨论。每个人都有自己的最爱&#xff0c;想排出个理想的榜单还真是困难。以前也整理过Intellij的快捷键&#xff0c;这次就按照我日常开发时的使用频率&#xff0c;简单分类列一下我最喜欢的…

ES5-13 对象属性遍历、this、callee、caller

链式调用 在每个函数内部return this 访问对象属性 点语法[]中括号内是字符串或是变量 数组是特殊的对象 对象属性遍历 for in(遍历对象或数组) - 不必再用Object.keys那么麻烦了 for(var key in obj){console.log(obj[key])// obj.key返回undefined// 因为js引擎会转换为…

算法 --- 顺序查找、二分查找的js实现

顺序查找: function seqSearch(arr, data) {for(let i 0; i< arr.length;i) {if(data arr[i]) {return i;}}return -1 } var arr[3,44,38,5,47,15,36,26,27,2,46,4,19,50,48]; console.log(seqSearch(arr, 15))二分查找: function binSearch(arr, data) {let low 0;let…

字符串连接(贪心)

输入n个字符串s[i]&#xff0c;你要把他们按某个顺序连接起来&#xff0c;使得字典序最小。 (1 < n < 100) (每个字符串长度 < 100) (字符串只包含小写字母) Input 第一行一个整数n。 接下来每行一个字符串s[i]。 Output 一行一个字符串表示把输入的n个字符串按某个顺…

hibernate课程 初探单表映射3-1 hibernate单表操作简介

本章简介&#xff1a; 1    单一主键 2    基本类型 3    对象类型 4    组件属性 5    单表操作CRUD实例转载于:https://www.cnblogs.com/1446358788-qq/p/8232078.html

vue --- cdn导入,一些基本操作

使用cdn导入vue.并使用vue做一些简单的操作. cdn导入vue: <script src"https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>vue-router的CDN导入: <script src"https://unpkg.com/vue-router2.5.3/dist/vue-router.js"></scrip…

SpringBoot 2.0 pom.xml 配置(热启动)

<?xml version"1.0" encoding"UTF-8"?><project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation"http://maven.apache.org/POM/4.0.0 http://m…

ES5-14 【utils】三目运算符、对象克隆、浅拷贝、深拷贝

浅拷贝 for-in&#xff08;遍历一个实例对象&#xff0c;原型上的属性也会打印&#xff09; Object.prototype.num 1 function shallowClone(origin, target) {for (var key in origin) {target[key] origin[key]} } var p1 {name: 人类,daughter: {first: Jessica,} } va…

java代理的原理及应用

什么是代理模式&#xff1f; 定义 为其他对象提供一种代理以控制对这个对象的访问。在某些情况下&#xff0c;一个对象不适合或者不能直接引用另一个对象&#xff0c;而代理对象可以在客户端和目标对象之间起到中介的作用。 ——百度百科 代理模式的角色 抽象角色&#xff1a;代…

vue --- 过滤器、计算、方法、观察属性

过滤器属性:filters: <div id "app">{{num}}<br>{{num | toInt}}<br>{{num | toFloor}}<br>{{num | toCeil}}<br> </div> <script>let vm new Vue({el: #app,data:{num:3.45,},// 过滤器filters:{toInt(value){return …

《你不知道的JavaScript(上卷)》读书笔记

第一次尝试用思维导图记笔记&#xff0c;感觉还不错~~~不过还是改不了我读书笔记写成抄书笔记的毛病 。 因为开始学JS的时候&#xff0c;一般浏览器就已经支持ES6了&#xff0c;所以比较喜欢使用ES6语法&#xff0c;let&#xff0c;>等&#xff0c;文中代码不是抄书的&#…

ES5-15 数组基础、数组方法、数组排序

创建数组 字面量 var arr []构造函数 var arr new Array()不使用new var arr Array() 所有数组都继承于Array.prototype&#xff0c;能使用其中的数组方法 数组是另一种形式的对象&#xff0c;访问机制相同数组的empty项打印出来是undefined&#xff0c;empty不是值只是一个…

Centos 7 配置 NFS

安装NFS包 yum install nfs-utils.x86_64 启动NFS服务需要首先启动rpcbind服务&#xff0c;这个rpcbind包已经在上面安装好了 先配置 /etc/exports 文件 vi /etc/exports /etc/exports文件内容格式&#xff1a; <输出目录> [客户端1 选项&#xff08;访问权限,用户映射,其…