1.创建对象
1.字面量方式创建对象
var obj={
name:'Jack',
age:18,
sayHai:function(){
console.log('hello world')
}
}
2.内置构造函数创建对象
var obj=new Object()
obj.name='Jack'
obj.age=18
obj.sayHai=function(){
console.log('say hello world')
}
3.工厂函数创建
//1.制造一个工厂函数
//2.使用工厂函数创建
function createObj(){
//手动创建一个对象
var obj={}
//手动向里面添加属性
obj.name='Jack'
obj.age=18
obj.sayHi=function(){console.log('say hello world')}
//手动返回这个对象
return obj
}
//使用工厂函数去创建对象
var obj1 = createObj()
var obj2 = createObj2()
4.自定义构造函数创建对象
//1.制造一个自定义构造函数
//2.使用自定义构造函数制造对象
//制造自定义构造函数,构造函数会自动创建对象，自动返回这个对象
function createObj(name,age){
//自动创建对象
//手动向对象里面添加成员
//这里的this指向当前实例（new 前面的变量）
this.name=name
this.age=age
this.sayHai = function(){
console.log("hello world")
}
//自动返回对象
}
//使用自定义构造函数制造对象
var obj1 = new createObj('Jack',18)
var obj2 = new createObj('Rose',20)
2.构造函数的使用
//1.构造函数和普通函数没有区别,只不过在调用的时候与new关键字一起使用
//2.书写构造函数，函数名首字母大写，这样当你看到名字的时候，就知道要和new关键字连用
//3.调用的时候，需要和new关键字连用，因为只有和new关键字连用的时候，这个函数才会有自动创建和返回对象的能力，因为我们之所以写构造函数，就是为了使用它去批量生产对象，如果不和new关键字连用，那么该函数没有创建对象的能力，，没有自动返回对象的能力
//4.调用构造函数的时候,如果不需要写参数的时候，可以不写最后的小括号，但是一般建议都写小括号
//5.当你的函数名和new关键字连用的时候，函数内部的this指向当前实例（new 关键字前面的变量），我们直接在函数体内写的this.xxx=值就是在向自动创建出来的对象里面添加内容
//6.构造函数里面不要写return，如果返回基本数据类型，那么返回值实际上还是这个对象，如果是复杂数据类型（数组等），返回对象就是复杂数据类型
function person(){
console.log('hello world')
}
function Person(){
this.name='jack'
}
var obj
- 构造函数的不合理之处
+ 当你在构造函数体内书写方法的时候
=> 你需要向对象上添加方法的时候
=> 只要创建一次对象(new 一次) 就会有一个函数在占用空间
=> 创建 100 次对象, 会有 100 个一模一样的函数出现
+ 100 个函数一模一样
=> 但是其实里面有 99 个是重复的, 没有必要存在
原型
原型 prototype
+ 定义: 每一个函数天生自带一个属性, 叫做 prototype, 是一个对象
+ 构造函数也是函数, 也会有这个自带的空间 prototype
+ 既然 prototype 是一个对象, 我们就可以使用对象操作的语法, 向里面添加一些内容
对象
+ 定义: 每一个对象, 在你访问他的成员的时候, 如果自己没有这个属性
=> 会自动去所属构造函数的 prototype 上查找
+ 自定义构造函数创建的对象也是对象, 当你访问某一个成员的时候
=> 如果没有, 也会自动去所属构造函数的原型上查找
=> 哪一个构造函数创建的对象, 这个对象就属于哪一个构造函数
=> 因为构造函数在创建对象的过程, 我们起名为 实例化 的过程
-> 创建出来的对象叫做这个构造函数的一个 实例化对象
function Person() {}
Person.prototype.sayHi = function () { console.log('我是 Person 原型上的方法') }
console.log(Person.prototype)
// 创建一个实例化对象
// 因为 p1 是 Person 实例化出来的对象
// p1 就是属于 Person 这个构造函数的
// 当你访问 p1 的 sayHi 成员的时候, p1 自己是没有的
// 会自动去 Person 的 原型(prototype) 上查找
var p1 = new Person()
console.log(p1)
p1.sayHi()
// 创建第二个实例化对象
// 因为 p2 也是 Person 的实例化对象
// p2 没有 sayHi 成员, 也会自动去 Person 的原型上查找
var p2 = new Person()
console.log(p2)
p2.sayHi()
/*
p1 的 sayHi 方法和 p2 的 sayHi 方法都是使用的 Person 构造函数的原型上的方法
我只要向 Person 的原型上添加一些方法
所有的 Person 的每一个实例都可以使用
并且使用的都是同一个函数, 不会出现浪费空间的行为
*/
console.log(p1.sayHi === p2.sayHi) // true 说明是一个函数
选项卡案例
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul, ol, li {
list-style: none;
}
.tab {
width: 600px;
height: 400px;
border: 10px solid #333;
margin: 50px auto;
display: flex;
flex-direction: column;
}
ul {
height: 60px;
display: flex;
}
ul > li {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
font-size: 40px;
color: #fff;
background-color: skyblue;
cursor: pointer;
}
ul > li.active {
background-color: orange;
}
ol {
flex: 1;
position: relative;
}
ol > li {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
font-size: 100px;
color: #fff;
background-color: purple;
display: none;
justify-content: center;
align-items: center;
}
ol > li.active {
display: flex;
}
</style>
</head>
<body>
<div class="tab" id="box">
<ul>
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ul>
<ol>
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ol>
</div>
<div class="tab" id="box2">
<ul>
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ol>
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
</div>
<script>
/*
简单版面向对象选项卡
1. 抽象内容
+ 一个能够完成选项卡的对象, 需要有哪些属性和方法
+ 属性: 所有可以点击的按钮盒子
+ 属性: 所有可以切换的选项盒子
+ 方法: 能添加点击事件的方法
2. 书写构造函数
+ 能创建一个对象, 包含两个属性和一个方法
+ 属性直接写在构造函数体内
+ 方法写在构造函数的原型上
*/
// 2. 书写构造函数
function Tabs(ele) {
// 范围
this.ele = document.querySelector(ele)
// 在范围内找到所有可以点击的盒子
this.btns = this.ele.querySelectorAll('ul > li')
// 在范围内找到所有需要切换显示的盒子
this.tabs = this.ele.querySelectorAll('ol > li')
}
// 原型上书写方法
Tabs.prototype.change = function () {
// 执行给所有 btns 里面的 按钮添加点击事件
// 我怎么拿到 btns
// 绝对不能直接使用 t 这个变量
// console.log(this.btns)
// 提前保存一下 this
var _this = this
for (var i = 0; i < this.btns.length; i++) {
// 提前保存索引
this.btns[i].setAttribute('index', i)
this.btns[i].addEventListener('click', function () {
// console.log('我被点击了')
// 需要让实例的 btns 里面的每一个没有 active 类名
// 需要让实例的 tabs 里面的每一个没有 active 类名
// 这里不是在 change 函数的作用域了, 而是事件处理函数的作用域
// 在事件处理函数里面, this 指向当前事件的事件源
// console.log(_this)
// 当你访问 _this 的时候, 其实是在访问变量
// 自己作用域没有, 就会去上一级作用域查找
for (var j = 0; j < _this.btns.length; j++) {
_this.btns[j].className = ''
_this.tabs[j].className = ''
}
// 当前点击的这个 li 有 active 类名
this.className = 'active'
// 让 实例身上的 tabs 里面索引对应的哪一个 li 有 active 类名
// 拿到当前 li 身上保存的 索引
var index = this.getAttribute('index') - 0
_this.tabs[index].className = 'active'
})
}
}
// 使用的时候
// 选项卡就可以使用了
var t = new Tabs('#box')
// 实例对象在调用方法
// 函数调用方式, 对象.函数名()
// 函数内部的 this 就是指向 点 前面的 xxx
// 我在 change 函数里面写的 this 就是 t
t.change()
// 实现第二个选项卡
var t2 = new Tabs('#box2')
t2.change()
</script>
</body>
3.原型和原型链
1.原型
- 仅使用构造函数
- 原型
p1.__prpto__==Person.prototype
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
/*
解决问题
+ 原型
=> 概念: 每一个构造函数天生自带一个 prototype 属性, 是一个对象数据类型
=> 概念: 每一个对象天生自带一个属性 __proto__, 指向所属构造函数的 prototype
=> 概念: 当你访问对象的成员的时候, 首先在自己身上查找, 如果没有, 自动去到 __proto__ 上查找
+ 如何解决问题
=> 我们把需要添加给实例的方法, 放在构造函数的原型(prototype)上
=> 就可以有实例进行访问使用
+ 原型:
=> 构造函数天生自带的一个 prototype
=> 作用: 有构造函数添加方法, 专门给实例对象使用
*/
// 当函数被书写完毕以后
// 就会有 prototype 出现
// function Person() {}
// // 直接向 prototype 内添加一些成员
// Person.prototype.a = 100
// Person.prototype.b = 200
// console.log(Person.prototype)
// // 创建一个实例对象
// // p1 所属的构造函数就是 Person
// // p1.__proto__ === Person.prototype
// var p1 = new Person()
// console.log(p1.__proto__ === Person.prototype)
// console.log(p1.__proto__)
// // 当你访问 p1 的 a 成员
// // 因为当你访问 p1.a 的时候, 自己没有, 会自动去自己的 __proto__ 上查找
// // 又因为 自己的__proto__ 就是 Perosn.prototype
// // 所以, 其实就是去到 Person.prototype 上查找
// console.log(p1.a)
function Person(name, age) {
// 向实例对象上添加属性
this.name = name
this.age = age
// 向实例对象上添加方法
// this.sayHi = function () { console.log('hello world') }
}
// 把想添加给实例对象的方法, 书写原型上
Person.prototype.sayHi = function () { console.log('hello world') }
// 创建实例对象
// p1 和 p2 所属的构造函数都是 Person
// p1.__proto__ === Person.prototype
// p2.__proto__ === Person.prototype
var p1 = new Person('Jack', 18)
var p2 = new Person('Rose', 20)
console.log(p1)
console.log(p2)
console.log(p1.__proto__ === Person.prototype)
console.log(p2.__proto__ === Person.prototype)
// 当你访问 p1 的sayHi 的时候
// 自己没有, 回去自己的 __proto__ 上找
console.log(p1.sayHi)
// 当你访问 p2 的sayHi 的会搜
// 自己没有, 会去自己的 __proto__ 上找
console.log(p2.sayHi)
// 因为 p1.__proto__ 和 p2.__proto__ 是一个对象空间
// p1 和 p2 的 sayHi 是一个
console.log(p1.sayHi === p2.sayHi)
</script>
</body>
2.原型链
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
/*
问题1: 实例对象身上的 __proto__ 指向谁 ?
=> 指向所属构造函数的 prototype
=> p1 所属的构造函数是 Person
=> p1.__proto__ 指向 Person.prototype
问题2: Person.prototype 的 __proto__ 指向谁 ?
=> Person.prototype 所属的构造函数是谁
=> 因为 Perosn.prototype 是一个对象数据类型(Object)
=> 在 JS 内所有的 Object 数据类型都是属于 Object 这个内置构造函数
=> Person.prototype 是属于 Object 这个内置构造函数的
=> Person.prototype 的 __proto__ 指向 Object.prototype
问题3: Person 的 __proto__ 指向谁 ?
=> Person 是一个函数, 函数本身也是一个对象, 就会有 __proto__
=> 在 JS 内, 所有的函数都是属于内置构造函数 Function 的实例
=> Person.__proto__ 指向 Function.prototype
问题4: Object.prototype 的 __proto__ 指向谁 ?
=> Object.prototype 是一个对象数据类型, 只要是对象, 都是数据 Object 这个内置构造函数的
=> 注意: Object.prototype 在 JS 内叫做顶级原型, 不在有 __proto__ 了
=> Object.prototype 的 __proto__ 指向 null
问题5: Object 的 __proto__ 指向谁 ?
=> Object 是内一个内置构造函数, 同时也是一个函数, 同时也是一个对象
=> 在 JS 内, 所以的函数都是属于内置构造函数 Function 的实例
=> Object 也是 Function 的实例
=> Object.__proto__ 指向 Function.prototype
问题6: Function.prototype 的 __proto__ 指向谁 ?
=> Function.prototype 也是一个对象数据类型
=> 只要是对象数据类型都是 Object 的实例
=> Function.prototype 的 __proto__ 指向 Object.prototype
问题7: Function 的 __proto__ 指向谁 ?
=> Function 也是一个内置构造函数, 也是一个函数
=> 在 JS 内, 所有的函数都是属于内置构造函数 Function 的实例
=> Function 自己是自己的构造函数
=> Function 自己是自己的实例对象
=> Function 所属的构造函数的是 Function
原型链
+ 用 __proto__ 串联起来的对象链状结构
+ 注意: 使用 __proto__
+ 每一个对象数据类型, 都有一个属于自己的原型链
+ 作用: 为了访问对象成员
对象访问机制:
+ 当你需要访问对象的成员的时候
+ 首先在自己身上查找, 如果有直接使用
+ 如果没有, 会自动去 __proto__ 上查找
+ 如果还没有, 就再去 __proto__ 上查找
+ 直到 Object.prototype 都没有, 那么返回 undefined
*/
function Person() {}
var p1 = new Person()
</script>
</body>
- 注：之后会使用ES6的语法写类，这里只是简要说明一下JavaScript面向对象的思想
1250
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
