JavaScript学习笔记022-原型链0原型继承0对象的深浅
2018-09-01 本文已影响2人
Mr柳上原
Author：Mr.柳上原
- 付出不亚于任何的努力
- 愿我们所有的努力，都不会被生活辜负
- 不忘初心，方得始终
这几天一直在做node项目实训
学到了很多实际企业开发知识
学的东西
跟要运用起来的东西
就好像教会你1+1=2
然后让你做高等代数
还需要加倍的努力啊
兄弟
<!DOCTYPE html> <!-- 文档类型：标准html文档 -->
<html lang='en'> <!-- html根标签 翻译文字：英文 -->
<head> <!-- 网页头部 -->
<meat charset='UTF-8'/> <!-- 网页字符编码 -->
<meat name='Keywords' content='关键词1,关键词2'/>
<meat name='Description' content='网站说明'/>
<meat name='Author' content='作者'/>
<title>前端59期学员作业</title> <!-- 网页标题 -->
<link rel='stylesheet' type='text/css' href='css/css1.css'/> <!-- 外链样式表 -->
<style type='text/css'> /*内部样式表*/
</style>
</head>
<body> <!-- 网页主干：可视化区域 -->
<script>
/*
new：
生成一个对象
new执行的时候，函数内部的this指向这个new创建的对象
new执行的本次函数调用结束时，默认返回这个new创建的对象
*/
function fn(){
this.name = name;
// 函数内部生成的值，不是函数调用生成的，而是new生成的时候就有的特性
// this.name = arguments[0]; // 特性
}
fn.prototype = {
constructor = fn,
}
new fn();
// fn是构造函数
// fn.prototype是类的原型（给实例添加公有属性）
// new fn()是类的实例化
// obj = new fn()，obj就是fn类的实例
/*
原型：prototype
原型的本质，是个json格式的对象
一个对象，是被这个对象对应的类所实例出来的
原型也是个对象
原型也是被它对应的类所实例出来的
数字，字符串，布尔，数组，函数，symbol
都有原型
Number，String，Boolean，Array，Function，Symbol
这些原型的原型
Object
js基于原型，Object是所有以上数据类型的原型，而原型是类实例出来的
Function（js最初的类，不同于上面的Function）
*/
// 原型链
// Objet的原型，是最顶层的原型
// 请求数据时，先向原型请求，没有找到就继续向原型的原型请求，直到最顶层Objet的原型，如果都没有，就会抛出错误
// 原型也是一个对象，所以它也有对应的类的原型
// 一层一层的原型的链式关系，就是原型链
// hasOwnProperty 判断一个属性是否在原型上
obj.hasOwnProperty("name"); // true
// instanceof 判断一个对象是否存在另一个对象的原型链上
obj instanceof fn; // true fn存在于obj的原型链上
// 原型继承
// 私有属性的继承，是拷贝一个相似的
// 原型的继承，是同一个
function Person(name){ // 类
this.name = name;
// 右边赋值交出的是对象的内存地址
// this.__proto__ === Person.prototype; // 原型仓库
}
// 原型的继承
Person.prototype = Array.prototype; // 继承数组的属性
Person.prototype = String.prototype; // 继承字符串的属性
......
Person.prototype.add = function (){} // 原型扩展方法
let p1 = new Person("fengyu"); // 实例
// 实例的__proto__指向了实例对应的类的prototype
console.log(p1.__proto__ === Person.prototype); // true
// 原型的指向：constructor
Person.prototype.constructor = Person;
// 使用对象的形式定义类
Person.prototype = {
constructor: Person, // 必须把指向加上
add (){}
}
// 最顶层对象原型的继承
Object.prototype.fengyu = function (){
console.log(this); // this指向调用它的字符串
}
"123".fengyu(); // 最顶层对象原型的扩展方法，任何对象都能调用，不推荐使用
// 继承
// 父类传给子类
function P1(opt){ // 父类
this.name = opt.name;
this.age = opt.age;
}
P1.prototype.sayName = function (){
alert(this.name);
}
function P2(opt){ // 子类，继承父类
// P2的this指向改为P1
P1.call(this, opt); // 继承私有属性 基类
// 自行扩展属性
this.sex = opt.sex;
}
// 继承公有属性
// 方案一：P2的原型成为P1的原型（pass）
P2.prototype = P1.prototype; // 不推荐，引用型数据赋值的是内存地址，扩展P2时会同时改变P1的环境
// 方案二：P2的原型成为P1的实例，P2的原型变成了P1原型的子类（pass）
P2.prototype = new P1({}); // P1的原型上的私有属性会出现异常值
// 方案三：新定义一个空的类，用新类的原型和P1交换（right）
function C(){}
C.prototype = P1.prototype;
P2.prototype = new C();
// 方案四：for in循环
for (var key in P1.prototype){
P2.prototype[key] = P1.prototype[key];
} // 不能克隆原型链，只能在一层原型上生效
new P2({
name: "fengyu",
age: 18,
sex: "男",
})
// 对象的深浅拷贝
const obj = {
a: 1,
b: ["a", {
b: 2,
c: 3,
d: [4, 5, 6]
}]
}
function extend(ob1, deep){
// deep判断：true启动深拷贝
// deep判断：false启动浅拷贝
var obj = {};
if(ob1 instanceof Array){
obj = [];
}
for (var key in ob1){
var value = ob1[key];
obj[key] = (!!deep && typeof value === "object" && value !== null) ? extend(value, deep) : value;
}
return obj;
}
// const obj2 = extend(obj); // 浅拷贝
const obj2 = extend(obj, true); // 深拷贝
obj2.b.push("c");
console.log(obj);
console.log(obj2);
// 骚的一匹的JSON拷贝（不支持函数）
const obj = {
a: 1,
b: ["a", {
b: 2,
c: [3],
d: 4
}]
}
const obj2 = JSON.parse(JSON.stringify(obj));
obj2.b[1].c.push("p");
console.log(obj);
console.log(obj2);
console.log(obj === obj2); // obj和obj2互不影响
// 缩进两格
const json = JSON.stringify(obj, null, 2);
console.log(json);
// es6：继承（extends）
class DogOne{
constructor(name, age, sex, food, add, friend){
this.name = name;
this.age = age;
this.sex = sex;
this.food = food;
this.add = add;
this.friend = friend;
}
eat(){
console.log(this.name + "呼噜呼噜" + this.food);
}
sport(){
console.log(this.name + "嘿咻嘿咻" +this.add);
}
}
class DogTwo extends DogOne{
constructor(name, age, sex, food, add, friend){
// super必须调用，语法规定，本次调用super就相当于父类DogOne本身
// super不调用的时候，子类DogTwo 不具备this属性
super(name, age, sex, food, add, friend);
}
sexS(){
console.log(this.name + "噗哧噗哧" + this.friend);
}
}
const dog1 = new DogOne("风屿", 18, "女", "鸡屁股", "窝", "小花");
const dog2 = new DogTwo("阿飞", 19, "男", "鸡翅膀", "巢", "旺财");
dog1.eat();
dog1.sport();
// dog1.sex();
dog2.eat();
dog2.sport();
dog2.sexS();
console.log(dog1);
console.log(dog2);
</script>
</body>
</html>
