发表于： 2023-03-17 20:57:33
0 267
jt知识：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// 构造函数 公共的属性和方法 封装到 Star 构造函数里面了
// 公共的属性写到 构造函数里面
// function Star(uname, age) {
// this.uname = uname
// this.age = age
// // this.sing = function () {
// // console.log('唱歌')
// // }
// }
// //公共的方法写到 原型对象 身上
// Star.prototype.sing = function () {
// console.log('唱歌')
// }
// const ldh = new Star('刘德华', 55)
// const zxy = new Star('张学友', 58)
// ldh.sing()
// zxy.sing()
// // console.log(ldh === zxy) // false
// console.log(ldh.sing === zxy.sing) // true
// 每一个构造函数都有一个 prototype 属性 指向另一个对象，我们称为 原型对象
// console.dir(Star.prototype) //指向 Object 对象
let that
function Star(uname) {
// that = this
this.uname = uname
}
// 原型对象里面的函数 this 指向的还是实例对象 ldh
Star.prototype.sing = function () {
that = this
console.log('唱歌')
}
// 实例对象 ldh
// 构造函数里面的 this 就是 实例对象 ldh
const ldh = new Star('刘德华')
ldh.sing()
console.log(that === ldh) //true
//小练习 给数组扩展方法
// 需求 给数组扩展最大值方法求和方法
// 1、我们定义的这个方法，任何一个数组实例对象都可以使用
// 2、 自定义的方法写到 数组.prototype 身上
//最大值
const arr = [1, 2, 3]
Array.prototype.max = function () {
// 展开运算符
// console.log(arr) //undefined 还没有传入值
// 原型函数 里面的this 指向谁？ 实例对象 arr
return Math.max(...this)
}
// 最小值
Array.prototype.min = function () {
// 展开运算符
// 原型函数 里面的this 指向谁？ 实例对象 arr
return Math.min(...this)
}
console.log(arr.max())
console.log([3,5,7].max())
console.log(arr.min())
// 求和
Array.prototype.sum = function () {
return this.reduce( (prev, item) => prev + item, 0)
}
console.log(arr.sum())
console.log([10, 20, 30].sum())
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// constructor 单纯 构造函数
function Star() {
}
// Star.prototype.sing = function () {
// console.log('唱歌')
// }
// Star.prototype.dance = function () {
// console.log('跳舞')
// }
console.log(Star.prototype) // 有 constructor
Star.prototype = {
// 重新指回创造这个原型对象的 构造函数
constructor: Star,
sing: function () {
console.log('唱歌')
},
dance: function () {
console.log('跳舞')
}
}
// console.log(Star.prototype.constructor) // 没有 constructor
console.log(Star.prototype)
// const ldh = new Star()
// console.log(Star.prototype)
// console.log(Star.prototype.constructor === Star) //true</script>
<script>
function Star() {}
const ldh = new Star()
// 对象原型 __proto__ 指向 该构造函数的原型对象
console.log(ldh.__proto__)
// console.log(ldh.__proto__ === Star.prototype)
// 对象原型里面有 constructor 指向构造函数 Star
console.log(ldh.__proto__.constructor === Star)
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// 继续抽取 公共的部分放到原型上
// const Person = {
// eyes: 2,
// head: 1
// }
//构造函数 new 出来的对象 结构一样 但是对象不一样
function Person() {
this.eyes = 2
this.head = 1
}
// console.log(new Person())
// 女人 构造函数 想要继承 Person
function Woman(){
}
// Woman 通过原型继承 Person
Woman.prototype = new Person()
// 指会原来的构造函数
Woman.prototype.constructor = Woman
// 给女人添加一个方法 生孩子
Woman.prototype.baby = function () {
console.log('宝贝')
}
const red = new Woman()
console.log(red)
// console.log(Woman.prototype)
// 男人 构造函数 想要继承 Person
function Man(){
}
Man.prototype = new Person()
Man.prototype.constructor = Woman
const zs = new Man()
console.log(zs)
// console.log(Man.prototype)
</script>
</body>
</html>
返回列表
评论