整理自己思路的笔记,会的就删,没掌握牢的先留着
声明
function Point(x,y){
this.x=x;
this.y=y;
this.toString=function(){
return `(${this.x},${this.y})`
}
}
let p= new Point(1,2)
class Point{
constructor(x,y){
this.x=x;
this.y=y;
}
toString(){
return `(${this.x},${this.y})`
}
}
let p= new Point(1,2)
私有变量 和 私有属性
function Test(){
var color = "blue";//私有变量
var fn = function(){} //私有函数
}
class Foo {
#a; //私有变量
#b; //私有变量
constructor(a, b) {
this.#a = a;
this.#b = b;
}
#sum() { //私有函数
return this.#a + this.#b;
}
printSum() {
console.log(this.#sum());
}
}
静态变量 和 静态属性
function Obj(){}
Obj.num = 72;//静态变量
Obj.fn = function(){} //静态函数
class FakeMath {
static PI = 22 / 7;
static #totallyRandomNumber = 4;
static #computeRandomNumber() {
return FakeMath.#totallyRandomNumber;
}
static random() {
console.log('I heard you like random numbers…')
return FakeMath.#computeRandomNumber();
}
}
react 常年让人搞不懂的东西
export function defaultToString(item) {
let typeName = Object.prototype.toString.call(item);
let obj = {
"[object Null]": "NULL",
"[object Undefined]": "UNDEFINED",
"[[object String]": "NULL",
"[object Function]": "NULL",
};
return obj[typeName] ? obj[typeName] : item.toString();
}
// 字典类和集合的区别,字典类是【键,值】集合是【值,值】
// 字典
export class Dictionary {
constructor(toStrFn = defaultToString) {
this.toStrFn = toStrFn;
this.table = { name: "xuziling" };
}
}
Class 定义的属性在prototype(原型)上 构造函数的是放在构造函数的,类似于自带的属性 constructor 差不多,也是有差异 class 类的属性和方法,除非显式定义在其本身(即定义在
this对象上),否则都是定义在原型上(即定义在class上)判断方法是自带的,还是继承于原型,用方法 hasOwnProperty
function Point1(){
this.toString=function(){}
this.toValue=function(){}
}
let p1=new Point1();
class Point2 {
constructor(){}
toString(){}
toValue(){}
}
let p2=new Point2()
问题一 在浏览器中打印不出来 prototype
比如 p1.prototype 报undefined
p1._proto_是有值的
构造函数有原型,实例没有
class有 实例没有
实例要取,浏览器有 _proto_
`__proto__`和prototype
`__proto__`是实例的属性,prototype是构造函数的属性
只有函数才有prototype属性并可以访问到,
实例的`__proto__` 和原型的prototype 指向的是同一个东西
原型有一个 constructor 指向 构造函数
react常见问题
实例的方法中的this 指向实例,如果该方法没有被实例调用 如
const logger =new Logger()
let {printName}=logger
priName 在被调用时,它的this指向的是当前环境
锁死this的方法是 在定义时,标明 this.printName=this.printName.bind(this)
## 箭头函数内部的this总是指向定义时所在的对象
继承
class Point {}
class ColorPoint extends Point {
constructor(x,y,color){
super(x,y)
this.color=color;
}
toString(){
return this.color+'' +super.toString()
}
}
super 代表的是父类构造函数
ES6 规定,子类必须在constructor()方法中调用super()。
ES6 的继承机制,则是先将父类的属性和方法,加到一个空的对象上面,然后再将该对象作为子类的实例,即“继承在前,实例在后”。这就是为什么 ES6 的继承必须先调用super()方法,因为这一步会生成一个继承父类的this对象,没有这一步就无法继承父类。
this调用必在super之后
除私有变量 私有方法外,其它父类 方法,属性均可被继承
有助理解
对象和数组的创建就是构造函数
new Object();
new Array(2,3);
实际项目中能用到的场景
配置相关的东西最好写成构造函数,类似的还有要防止浅拷贝会带来影响的数据内容
见到最多的是 请求方法封装
Object.create
用于创建一个新对象,使用现有的对象来作为新创建对象的原型(prototype)。
新对象的原型就是调用 create 方法时传入的第一个参数:
// es5继承写法
function Box(){ //被继承的函数叫做超类型(父类,基类)
this.name = "Jack";
}
function Tree(){ //继承的函数叫做子类型(子类,派生类)
this.age = 300;
}
Tree.prototype = new Box();//Tree继承了Box,通过原型,形成链条
var tree = new Tree();
console.log(tree.name);//弹出 Jack
let tree2 = Object.create(tree) // tree2.__proto__ === Box
New 的 效果 作用
var o = new Foo();
等同于
var o = new Object();
o.__proto__ = Foo.prototype;
Foo.call(o);