千锋教育JavaScript全套视频教程(10天学会Js,前端javascrip

一.原型
原型的出现,就是为了解决 构造函数的缺点
也就是给我们提供了一个给对象添加方法的机会
不然构造函数只能给对象添加属性,不能合理的添加方法就太 LOW 了
1.原型的概念
每一个函数天生自带一个成员(属性和方法),叫做 prototype,是一个对象空间
即然每一个函数都有,构造函数也是函数,构造函数也有这个对象空间
这个 prototype 对象空间可以由函数名来访问
即然prototype是个对象,那么我们就可以向prototype里面放入一些东西
注意:prototype里面可以放入属性和方法,但是都是公有的,而且prototype里面的this也是指向new出来的实例对象
function Person(name, age) {
// 私有的属性
this.name = name;
this.age = age;
this.show = function () {//注意:如果方法构造函数和原型上面都有,构造函数里面的优先
return '我是构造函数里面的'
}
}
给原型添加方法(公有的)
Person.prototype.show = function () {
return `我的名字叫${this.name},我今年${this.age}岁`;
}
Person.prototype.show1 = function () {
return `我的名字叫${this.name},我今年${this.age}岁`;
}
Person.prototype.show2 = function () {
return `我的名字叫${this.name},我今年${this.age}岁`;
}
// Person.prototype.sex = '男';
let p1 = new Person('zhangsan', 20);
let p2 = new Person('lisi', 30);
console.log(p1.name);//zhangsan
console.log(p1.age);//20
console.log(p1.sex);//男,属性是来自原型上面的
console.log(p1.show());//我的名字叫zhangsan,我今年20岁
console.log(p1.show === p2.show);//true
Array.prototype.push = function () { };//覆盖系统的push方法
let a1 = [1, 2, 3];
a1.push(4, 5, 6);
console.log(a1);
二.总结面向对象开发 - 混合开发
1.构造函数 + 原型
属性放到构造函数里面,合理的
方法放到原型上面,也是合理的
2.无论是构造函数还是原型,里面的this指向是一样的,都指向实例对象(new 出来的对象)
3.简单的逻辑,面向过程合理,复杂的逻辑,面向对象
三.面向过程改面向对象的规则
1.变量或者常量 -> 变成属性
2.函数 -> 变成方法
3.注意this的指向 -> 箭头函数
3.1.定时器->window
3.2.事件处理函数->事件源(触发事件的元素对象)
3.3.无论是构造函数还是原型,里面的this指向是一样的,都指向实例对象
let a1= new Array()
let arr1 = [1, 2, 3, 3, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4, 5];
let arr2 = [10, 20, 30, 30, 30, 30, 30, 30, 30, 40, 40, 40, 40, 40, 50];
// console.log(arr);
console.log(Object.prototype.toString.call(arr1))
console.log(arr1.constructor)
console.log(a1.constructor)
console.log(Object.prototype.toString.call(a1))