构造函数和原型
文章目录
对象的三种创建方式
字面量
var obj = {}
new 关键字
var obj=new Object()
构造函数
function Person(){
this.name="zs"
this.age =12
}
var p = new Person()
构造函数存在问题
<script>
function Student(name, age, score) {
this.name = name
this.age = age
this.score = score
this.study = function () {
console.log('好好学习')
}
}
var s1 = new Student('zs', 12, 100)
var s2 = new Student('ls', 34, 89)
// 每创建一个对象,就会生成一个新的函数 存在浪费内存问题
// 所有的对象使用同一个函数,这样就节省了内存,怎么做呢?
</script>
构造函数原型 prototype
JavaScript规定,每一个构造函数都有一个prototype属性,指向另一个对象,这个prototype属性就是一个对象,这个对象的所有属性和方法,都会被构造函数所拥有
/*
实例成员 就是构造函数内部 通过this添加的成员uname age sing
*/
function Star(uname, age) {
this.uname = uname
this.age = age
// this.sing = function () {
// console.log('我会唱歌')
// }
}
// console.log(Star.prototype)
// 动态的方式给原型对象添加成员
Star.prototype.sing = function () {
console.log('我会唱歌')
}
// 实例化对象 new创建的对象就是一个实例对象
var ldh = new Star('刘德华', 18) // 实例成员只能通过实例化的对象来访问
console.log(ldh.uname)
console.log(ldh.age)
ldh.sing()
var zxy = new Star('张学友', 28)
zxy.sing()
// 一般情况下 我们把公共的属性定义到构造函数里面 公共的方法放到原型对象上
对象原型
实例对象都会有一个属性__proto__ 指向构造函数的prototype原型对象
之所以我们对象可以使用构造函数prototype 原型对象的属性和方法,就是因为对象有__proto__属性的存在
__proto__ 对象原型 和原型对象prototype 是等价的
__proto__ 对象原型的意义 在于为对象的查找机制提供了一个方向,或者说是一条路线,__proto__是一个非标准属性
在开发过程中,不可以使用这个属性__proto__,它只是内部指向原型对象prototype
constructor构造函数
对象原型(__proto__)和构造函数(prototype)原型对象里面都有一个属性,constructor属性我们称为构造函数
因为它指回构造函数本身
constructor 主要用于记录该对象引用于那个构造函数,它可以让原型对象重新指向原来的构造函数
一般情况下,对象的方法都在构造函数的原型对象中设置,如果有多个对象的方法,我们可以给原型对象采取对象形式赋值,但是这样会覆盖构造函数原型对象原来的内容,这样修改后的原型对象constructor 就不再指向当前构造函数了,
此时,我们可以再修改后的原型对象中,添加一个constructor指向原来的构造函数
原型链
每一个实例对象有一个 __proto__属性,指向构造函数的原型对象,
构造函数的原型对象,也是一个对象 这样一层一层往上找 就形成了原型链
构造函数实例和原型对象关系
构造函数的prototype指向了构造函数的原型对象
实例对象是由构造函数创建的,实例对象的__proto__属性指向了构造函数的原型对象
构造函数的原型对象的constructor属性指向构造函数,实例对象的原型的constructor也指向了构造函数
原型链和成员的查找机制
任何对象都有原型对象,也就是prototype属性,任何原型对象也是一个对象,该对象就有proto属性,这样一层一层向上找,就形成了一条原型链
访问一个对象的属性或者方法时,首先查找这个对象自身有没有这个属性
如果没有就查找它的原型(也就是__proto__指向的prototype的原型对象)
如果还没有就查找原型对象的原型(Object的原型对象)
以此类推 一直找到Object为止 null
__proto__对象原型的意义就在于 为对象成员查找机制提供一个方向,或者说是一条路线
原型对象中this的指向
构造函数中的this和原型对象的this ,都指向我们new出来的实例对象
function Star(uname, age) {
this.uname = uname
this.age = age
}
var that
Star.prototype.sing = function () {
console.log('我会唱歌')
that = this
}
var ldh = new Star('刘德华', 23)
// 1 在构造函数中,里面的this指向的是对象实例 ldh
ldh.sing()
console.log(that === ldh) //true
// 原型对象函数里面的this 指向的是实例对象 ldh
扩展内置对象
var arr = new Array()
arr = [3, 5, 6, 43, 22]
// arr.sum(1)
// console.log(arr)
// 扩展内置方法
Array.prototype.sum = function () {
var sum = 0
for (var i = 0; i < this.length; i++) {
sum += this[i]
}
return sum
}
// console.log(arr)
console.log(arr.sum())
this指向
var a = 10
function fn() {
console.log(123)
console.log(this)
}
window.fn() //this指向window
window.setTimeout(function () {
console.log(this, 'settimeout') //window
}, 1000)
btn.onclick = fn // 函数的调用者 <button id="btn">按钮</button>
function Fun() {
this.name = 'zs'
console.log(this) //this指向 Fun的实例对象
}
var f = new Fun()
var o = {
sayHi: function () {
console.log(this, 'o') //o这个对象
},
}
o.sayHi()
// console.log(window)
call
// call方法
function fn(x, y) {
console.log('我想喝牛奶')
console.log(this)
console.log(x + y)
}
var o = {
name: 'lucy',
}
// fn() //window
// call() 可以调用函数
// fn.call()
// call 可以改变这个函数的this指向,此时这个函数的this 就指向了o这个对象
fn.call(o, 2, 4)
apply
apply方法调用一个函数,可以简单理解成调用函数的方式,可以改变函数内的this指向
场景:跟数组有关系
/*
apply 应用的意思
*/
var o = {
name: 'lucy',
}
function fn(arr, arr1, arr2) {
console.log(this)
console.log(arr, arr1, arr2) //1,2,3
}
fn.apply(o, [1, 2, 3])
/*
可以调用函数 还可以改变this指向
它的参数必须是数组(伪数组)
apply的主要应用,可以使用apply借助于数学内置对象求数组最大值
Math.max()
*/
var arr = [1, 33, 55, 34, 23, 12]
var arr1 = ['red', 'pink']
var max = Math.max.apply(Math, arr) //Math.max(1, 33, 55, 34, 23, 12)
// var max = Math.max(34, 23, 45, 23)
console.log(max)
var min = Math.min.apply(Math, arr)
console.log(min)
bind
bind方法不会调用函数,但是能改变函数内this指向,返回的是原函数改变this之后产生的新函数
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<script>
/*
bind 绑定 捆绑意思
*/
var o = {
name: 'lucy',
}
function fn(a, b) {
console.log(this)
console.log(a + b)
}
var f = fn.bind(o, 34, 3)
// console.log(f)
f()
/*
不会调用原来的函数,但是可以改变函数内部this指向
返回的是原函数改变this之后产生的新函数
*/
// 有一个按钮,我们点击了按钮,禁用了按钮,3秒后要开启按钮
var btnArr = document.querySelectorAll('button')
for (var i = 0; i < btnArr.length; i++) {
btnArr[i].onclick = function () {
this.disabled = true
setTimeout(
function () {
this.disabled = false
}.bind(this),
3000
)
}
}
trim方法去除字符串两边的空格
// trim去除两端的空格
var str = ' hello '
console.log(str.trim())
var str1 = ' h e ll o '
console.log(str1.trim())
继承
子构造函数继承父构造函数中的属性
// 子构造函数继承父构造函数中的属性
// 1 父构造函数
function Father(uname, age) {
// this指向父构造函数中的实例对象
this.uname = uname
this.age = age
}
// 2 子构造函数
function Son(uname, age, score) {
// this指向子构造函数实例对象
Father.call(this, uname, age)
this.score = score
}
var s = new Son('刘德华', 12, 100)
console.log(s)
借用原型对象继承方法
// 1 父构造函数
function Father(uname, age) {
// this指向父构造函数中的实例对象
this.uname = uname
this.age = age
}
Father.prototype.money = function () {
console.log(10000)
}
// 2 子构造函数
function Son(uname, age, score) {
// this指向子构造函数实例对象
Father.call(this, uname, age)
this.score = score
}
// 直接赋值对象会有问题,constructor改变了
Son.prototype = new Father()
// 利用对象的形式 修改了原型对象,要把constructor指回原来的构造函数
Son.prototype.contructor = Son
Son.prototype.exam = function () {
console.log('考试了')
}
var s = new Son('liu', 18, 100)
console.log(s)
// this指向子构造函数实例对象
Father.call(this, uname, age)
this.score = score
}
// 直接赋值对象会有问题,constructor改变了
Son.prototype = new Father()
// 利用对象的形式 修改了原型对象,要把constructor指回原来的构造函数
Son.prototype.contructor = Son
Son.prototype.exam = function () {
console.log('考试了')
}
var s = new Son('liu', 18, 100)
console.log(s)