以生活中的例子来看什么叫面向对象，什么叫面向过程
你是如何解决吃回锅肉的问题？
面向过程编程：解决问题的过程，按步骤进行，第一步做什么，第二步做什么，一步一步完成。比如洗买肉，再洗肉，切肉，炒肉，吃肉。
面向对象编程：找具有解决问题功能的对象，调用其功能，完成任务。如果对象不存在，则创建对象。点外卖，下馆子，妈妈做等。
软件世界面向对象
面向过程编程思想
按步骤一步一步解决问题
面向对象编程思想:
找解决问题对象，调用功能解决问题， 如果对象不存在
=> 自己创建对象,封装功能，解决问题
分割字符串 'html_javascript_css' 返回数组[html,javascript,css]
面向过程：
<script>
function test1() {
let str = 'javascript_css_html'
let line = ''//存字符串
let arr = [] //空数组
//遍历数组字符串
for (let i = 0; i < str.length; i++) {
let chars = str.charAt(i)
if (chars !== '_') {
line = line + chars
} else {
if (line != '') {
arr.push(line)
line = ''
}
}
if (i == str.length - 1 && line != '') {
arr.push(line)
line = ''
}
}
console.log(arr)
}
test1()
</script>如果用面向对象写：
function test2(){
let str = 'javascript_css_html'
let arr=str.split('_')
console.log(arr)
}
test2() 
面向对象编程创建方式：简单方式new Object
//创建方式
let personObj=new Object();
//对象属性
personObj.name='小明'
personObj.age=3
//对象方法
personObj.palyGame=function(){
console.log('玩游戏')
}
personObj.palyGame()面向对象编程创建方式：字面量方式
let person={
name:'小小',
age:18,
playGame:function(){
console.log('玩游戏')
}
}
person.playGame();工厂函数：
//工厂函数
function creat(name,age){
return{
name:name,
age:age,
say:function(){
console.log(this.name)
}
}
}
//生成实例对象
var p1=creat('jack',18)
var p2=creat('rose',17)
console.log(p1)
console.log(p2)
由此可以见：工厂函数方式创建对象，根据传入属性值生成不同对象
工厂函数缺点： 不知道对象数据类型
构造函数：
——解析构造函数代码的执行
function Person(name,age){
//使用new操作符调用person（）的时候，
// 实际上会先创建一个对象
// var instance={}
//然后让内部的this指向instance对象
// this=instance
// 接下来所针对this的操作实际是instance
this.name=name
this.age=age
this.say=function(){
console.log(this.name)
}
//在函数的结尾会将this返回，也就是instance
// return this
}而要创建Person 实例，则必须使用new 操作符。
以这种方式调用构造函数会经历以下4 个步骤：
- 创建一个新对象
- 将构造函数的作用域赋给新对象（因此this 就指向了这个新对象）
- 执行构造函数中的代码
- 返回新对象
构造函数：
构造函数 - 创建对象 指定对象数据类型
语法:
function Person(name,age){
// 对象属性和方法
this.name = name // this.name->给当前对象创建name属性,将形参name的值赋值给name属性this.age = age
this.say = function(){
consolo.log('说话方法') } }
let p1 = new Person('jack',18)
注:
1. 构造函数名首字母大写
2. 函数体中定义属性和方法
不写其它形式代码
3. 使用new调用构造函数创建对象
对象的数据类型 => 构造函数名
let arr = new Array() // Array
<style>
*{
padding: 0;
margin: 0;
}
div{
width: 200px;
height: 200px;
background-color: skyblue;
}
</style>
</head>
<body>
<button class="btn">点我换皮肤</button>
<div></div>
<script>
function ChangeColor(){
this.btn=document.querySelector('.btn')
this.div=document.querySelector('div')
this.bindChange=function(){
//方法中的this是当前对象
let _this=this
this.btn.addEventListener('click',function(){
//事件处理函数中的This是事件源
_this.div.style.backgroundColor='pink'
})
}
}
let c1=new ChangeColor()
c1.bindChange()
</script>
效果图：
如果对象属性是变量，调用对象属性时，点语句改为中括号！
每个构造函数都有一个prototype属性指向它的原型对象
<script>
function Person(name, age) {
this.name = name
this.age = age
this.say = function () {
console.log('说话')
}
}
let p1 = new Person('jack', 18)
let p2 = new Person('rose',20)
console.log(p1)//Person {name: 'jack', age: 18, say: ƒ}
</script>
// 构造函数
function Person(name, age) {
this.name = name
this.age = age
}
// Person.prototype原型对象
// 公共的say方法定义到Person构造函数的原型对象上
// 所有实例对象都可以访问原型对象上公共的属性和方法
Person.prototype.say = function () {
console.log('说话')
}
// 实例对象
let p1 = new Person('jack',18)
let p2 = new Person('rose',20)
p1.say()
p2.say()
console.dir(Person) //dir方法显示对象结构
console.dir(Person.prototype);
console.dir(p1)
console.dir(p2)
console.log( Person.prototype === p1.__proto__ );
成员搜索原则：
面向对象编程思想
1. 找解决问题对象，如果对象存在调用其功能解决问题
2. 对象不存在，创建对象
3. 构造函数方式创建对象
- 构造函数: 对象私有的属性和方法定义在构造函数中
- 原型对象: 公共的属性和方法定义在原型对象上
对象成员(属性和方法)搜索原则：
先在实例对象上找，如果找不到，沿着隐式原型__proto__到原型对象上查找
function Person(name, age) {
this.name = name
this.age = age
// this.say = function(){
// console.log('构造函数 say');
// }
}
// 原型对象
Person.prototype.say = function () {
console.log('原型对象 say')
}
// 实例对象
let p1 = new Person('jack',18)
p1.say()更简单的原型写法
<script>
// 构造函数
function Person(name, age) {
this.name = name
this.age = age
}
// 原型对象
// Person.prototype.say = function () {
// console.log('说话 say')
// }
// Person.prototype.eat = function(){
// console.log('吃饭')
// }
// Person.prototype.type = '中国人'
Person.prototype = {
constructor: Person, // 手动添加constructor属性指向它的构造函数
type: '中国人',
say: function () {
console.log('说话 say')
},
eat: function () {
console.log('吃饭')
},
}
// 实例对象
let p1 = new Person('jack', 18)
p1.say()
p1.eat()
console.dir(Person.prototype)
</script>内置对象的原型
new Object() Object.prototype
new Array() Array.prototype
new Date() Date.prototype
原型方法中的this指向调用该方法的对象
<script> console.dir(Array.prototype); Array.prototype.sum = function(){ let s = 0 for(let i = 0; i < this.length; i++){ s += this[i] } return s } let arr = [10,20,30] let s = arr.sum() console.log('和是 ',s); let arr1 = [1,2,3,4,5,6,7,8,9] console.log( arr1.sum()); function test1(){ let arr = new Array(10,20,30) // let arr = [10,20,30] let i = arr.findIndex(item=>item==20) console.log(i); } </script>