原型

谁调用，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)

ES5-11原型与原型链深入、对象继承相关推荐

原型继承＋原型链 +　对象继承发展
一.原型继承: 1.说起原型继承,就要先由构造函数创造对象说起,首先了解构造函数内部基本原理: (1).在函数体最前面隐式的加上this = {} (2).执行 this.xxx = xxx; (3) ...
浅谈JS原型与原型链（一）
最近学习JavaScript原型与原型链的时候,被这块知识烧得脑壳疼,prototype与__proto__混淆不清.网上各种图解,都画的好复杂,绕老绕去,不明所以,看得越来越糊涂.还是亲自动手敲敲, ...
真丶深入理解 JavaScript 原型和原型链（二）：原型和原型链
原文地址: https://www.jeremyjone.com/745/,转载请注明. 上一篇文章已经总结了关于原型的两个属性,那么接下来所有原型和原型链,乃至后面的继承,都与这两个属性有关系. 原 ...
ES6/02/创建对象，构造函数和原型，原型和原型链，this指向，类，ES5新增的方法，数组方法，回调函数，ES5新增的字符串方法，ES5中新增的对象方法
创建对象 1,利用new Object()创建对象 var obj1 =new Object(); 2,利用对象字面量创建对象 var obj2={}; 3,利用构造函数创建对象 function S ...
小汤学编程之JavaScript学习day04——自定义对象、原型与原型链、BOM
一.自定义对象 1.对象的定义 2.对象的使用二.原型与原型链 1.JS的继承结构图 2.关键点三.BOM 1.window对象 2.document对象 3.lo ...
【JS对象】打败JS原型、原型链大恶魔方法详解
文章目录什么是对象? 什么是面向对象? 创建对象的方式原型是什么? __proto__属性 constructor属性原型链函数的定义类型有哪些? 函数也是一个对象完整的原型链打败恶魔第一 ...
JavaScript对象、原型、原型链知识总结思维导图
这个思维导图是我对Object,原型,原型链等知识的总结,主要参考高程一书第六章,写完才发现这么多,以后可能会进行精简.内容可能会出现差错,欢迎批评指正.下载==>Github ECMAScri ...
JavaScript对象——原型与原型链
原型与原型链一. 普通对象与函数对象 JavaScript 中,万物皆对象!但对象也是有区别的.分为普通对象和函数对象,Object .Function 是 JS 自带的函数对象.下面举例说明 va ...
把随机数对象暴露给window成为全局对象原型及原型链原型的指向是否可以改变
把随机数对象暴露给window成为全局对象 <!DOCTYPE html> <html lang="en"> <head><meta ch ...

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

原型

Object.create()

原型链

对象继承

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

ES5-11原型与原型链深入、对象继承相关推荐

最新文章

热门文章