全国建设部官方网站,建设校园网站的必要性,网站设计 ipad,wordpress直达按钮第一次尝试用思维导图记笔记#xff0c;感觉还不错~~~不过还是改不了我读书笔记写成抄书笔记的毛病 。 因为开始学JS的时候#xff0c;一般浏览器就已经支持ES6了#xff0c;所以比较喜欢使用ES6语法#xff0c;let#xff0c;等#xff0c;文中代码不是抄书的#…第一次尝试用思维导图记笔记感觉还不错~~~不过还是改不了我读书笔记写成抄书笔记的毛病 。 因为开始学JS的时候一般浏览器就已经支持ES6了所以比较喜欢使用ES6语法let等文中代码不是抄书的都用了ES6。 1. 属性描述符ES5开始 获取属性描述符 var myObject { a:2
};
Object.getOwnPropertyDescriptor( myObject, a );
// {// value: 2,// writable: true,// enumerable: true,// configurable: true
// } 设置属性描述符被设置的属性可以定义过也可以未定义过 var myObject {};
Object.defineProperty( myObject, a, {value: 2,writable: false, // 不可写! configurable: true, enumerable: true
}); 其中 writable 决定是否可以修改属性的值如果设置为 false。修改属性值会静默失败silently failed严格模式会报错TypeError。 configurable 决定属性是否可以配置。很显然把configurable设置为false是单项的。并且无法撤销。 即便属性是 configurable:false我们还是可以 把 writable 的状态由 true 改为 false但是无法由 false 改为 true。 configurable:false 还会禁止删除这个属性导致删除静默失败。 enumerable 控制属性是否会出现在对象的属性枚举中默认为true。for..in 遍历的是可枚举属性。 2. 访问描述符 当给一个属性定义 getter、setter 或者两者都有时这个属性会被定义为“访问描述 符”(和“数据描述符”相对)。对于访问描述符来说JavaScript 会忽略它们的 value 和 writable 特性取而代之的是关心 set 和 get(还有 configurable 和 enumerable)特性。 var myObject {// 给 a 定义一个setterget a() {return 2}
}Object.defineProperty(myObject, // 目标对象b, // 属性名{ // 描述符// 给 b 设置一个 getterget: function() { return this.a * 2},// 确保 b 会出现在对象的属性列表中enumerable: true}
)console.log(myObject.a) // 2
console.log(myObject.b) // 4a 3
b 5console.log(myObject.a) // 2
console.log(myObject.b) // 4 getter 和 setter 一般是成对出现如果只出现一个会导致 set 不生效 / get 到 undefined。 有个getter和setter就可以在设置数据的同时做一些其他的事情了vue的双向绑定就是在数据set()里更新dom元素同时在dom的input事件更新数据实现双向绑定。代码如下 !DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/title
/head
body!-- HTML --div idappinput typetext v-modelnumberbutton v-clickincre/buttonbutton v-clickminus-/buttonbutton v-clickincre44/buttonspan v-bindnumber/span/div!-- JavaScript --scriptfunction MyVue(options) {// 先绑定基本数据this.$el document.querySelector(options.el) // vue 绑定的 dom 元素this.$data options.datathis.$methods options.methods// 根据 dom 获取数据都绑定了哪些 dom 元素 并记录 以便数据更新的时候 同步更新domthis._binding {}// 初始化为空数组Object.keys(this.$data).forEach((item) {this._binding[item] []})this._complie(this.$el)console.log(this._binding)Object.keys(this.$data).forEach((item) {// 这里对value的使用是一个闭包?...let value this.$data[item]Object.defineProperty(this.$data, item, {get: () {console.log(获取${item}: ${value})return value},set: (val) {// 更新 data 的时候要把相关 dom 节点全部更新console.log(更新${item}: ${val})if (val ! value) {value valthis._binding[item].forEach((meth) {meth()})}}})})}/*** param {HTMLElement} root: vue 绑定的 dom 元素节点**/MyVue.prototype._complie function(root) {// 如果有子节点const nodes root.childrenfor (let i 0; i nodes.length; i) {const node nodes[i]if (node.children.length) {this._complie(node)}// 如果是bind 证明绑定了某个数据 那么改数据更改时 更改该处 domif (node.hasAttribute(v-bind)) {const dataName node.getAttribute(v-bind)const attr (node.tagName INPUT || node.tagName TEXTAREA) ? value : innerHTMLnode[attr] this.$data[dataName] // 初始化页面this._binding[dataName].push(() {console.log(v-bind: , node, attr, dataName)node[attr] this.$data[dataName]})}// 如果有 v-click 就在点击事件中执行methods中对应的那个函数if (node.hasAttribute(v-click)) {const methName node.getAttribute(v-click)const method this.$methods[methName]node.onclick method.bind(this.$data) // method是对data中的数据进行操作这里记得要把this绑到data上}// 数据更改时更新 dom 节点 dom 节点更改时也更新 dataif (node.hasAttribute(v-model)) {const dataName node.getAttribute(v-model)node.value this.$data[dataName] // 初始化页面this._binding[dataName].push(() {node.value this.$data[dataName]})node.addEventListener(input, () {console.log(v-model, node)this.$data[dataName] node.value})}}}window.onload function() {const app new MyVue({el: #app,data: {number: 0,c: 1},methods: {incre: function() {console.log(incre..., this)this.number},minus: function() {console.log(minus..., this)this.number--},incre4: function() {console.log(incre4..., this)this.number Number(this.number) 4}}})}/script
/body
/html View Code 详见https://juejin.im/post/5acc17cb51882555745a03f8 3. call、apply、bind 的联系和区别 他们都是定义在Function.prototype里面的函数都有绑定this的功能。原型如下 call(thisArg: any, args...: any) apply(thisArg: any, argArray: Array) apply可以把存放参数数组直接传递如果参数存在一个数组里使用apply将很方面。 可以通过call来将某个对象的函数应用在其他对象 Object.prototype.toString.call(something) bind也可以绑定this并返回一个函数同时bind还有一个功能就是绑定传入的函数。 function sayHello(arg1, arg2) {console.log(arg1, arg2)console.log(hello, i am this.name)
}name globallet p1 { name: xiaoming }
let p2 { name: hanmeimei }sayHello(arg1, arg2) // i am global
sayHello.apply(p1, [apply1, apply2]) // i am xiaoming
sayHello.apply(p2, [apply1, apply2]) // i am hanmeimei
sayHello.call(p1, call1, call2) // i am xiaoming
sayHello.call(p2, call1, call2) // i am hanmeimeilet sayHelloWithBind sayHello.bind(p1, 参数1)sayHelloWithBind(参数2) // 参数1 参数2 hello, i am xiaoming 如果使用内置的 .bind(..) 函数来生成一个硬绑定函数的话 该函数是没有 .prototype 属性的。在这样的函数上使用 instanceof 的话 目标函数的 .prototype 会代替硬绑定函数的 .prototype。 function Foo() {}
Bar Foo.bind({})
a new Bar()
console.log(a instanceof Foo) // true
console.log(a instanceof Bar) // true 4. import和export 有点多不想写了。。。。参考 Module 的语法 5. 类与对象 JavaScript没有构造函数只有函数的构造调用 JavaScript没有类只有对象 了解一下随意的 constructor function Foo() { ... }
var a new Foo();
a.constructor Foo; // true constructor所谓的“构造函数”其实是Foo.prototype的a本身并没有这个属性 a.hasOwnProperty(constructor) // false 也就是说 Foo.prototype.constructor Foo; // true 而和a是怎么生成的没有什么关系。 如果先设置 Foo.prototype{ ... } 那么 var a new Foo(); 生成的a对象的constructor也就是Object。 a在new的时候关联到了Foo.prototype如果你修改了 Foo.prototype ... a所关联的对象是不变的。 .constructor 并不是一个不可变属性。它是不可枚举的但是它的值是可写的。此外你可以给任意 [[Prototype]] 链中的任意对象添加一个名 为 constructor 的属性或者对其进行修改你可以任意对其赋值。 综上.constructor 是一个非常不可靠并且不安全的引用。通常来说要尽量避免使用这些引用。 原型继承 function Foo(name) {this.name name
}Foo.prototype.myName function() {return this.name
}function Bar(name, label) {Foo.call(this, name)this.label label
}// 为 Bar.prototype 从新赋值一个 [[Prototype]] 为 Foo.prototype 的对象
// 此时 Bar.prototype 是 没有constructor 属性的
Bar.prototype Object.create(Foo.prototype)Bar.prototype.myLabel function() {return this.label
}var a new Bar(a, obj a)console.log(a.myName())
console.log(a.myLabel()) 我们来对比一下两种把 Bar.prototype 关联到 Foo.prototype 的方法: // ES6 之前需要抛弃默认的 Bar.prototype
Bar.ptototype Object.create( Foo.prototype )
// ES6 开始可以直接修改现有的 Bar.prototype
Object.setPrototypeOf( Bar.prototype, Foo.prototype ) JavaScript中没有类只有对象所以没有类继承只有对象的委托通过 bObject.create(a) 可以将 b 的[[Prototype]] 属性设为 a这样当在b中查找属性找不到的时候就可以找到a。a中查找不到就继续沿原型链查找。最终一般会查找到Object.prototype。默认字面量对象的[[Prototype]]是Object.prototype。这样只要在Object.prototype上定义一些函数toString() valueOf()等所有对象都可以使用。 new Foo() 操作可以生成一个对象然后将对象的[[Prototype]] 绑定到Foo.prototype并将Foo的this绑定为这个新函数如果Foo()没有返回值的话该函数将作为返回值。可以看出new像是一个辅助功能来方面在JS中模拟类似类的操作。注意如果Foo返回了一个对象那个new返回的也就是那个对象新生成的对象将被抛弃。而那个对象可能和Foo没有任何关系。 对象关联OLOO objects linked to other objects) Task {setID: function(ID) {this.id ID;},outputID: function() {console.log(this.id);}
};
// 让XYZ委托Task
XYZ Object.create(Task);
XYZ.prepareTask function(ID, Label) {this.setID(ID);this.label Label;
};
XYZ.outputTaskDetails function() {this.outputID();console.log(this.label);
};
// ABC Object.create( Task );
// ABC ... ...XYZ.prepareTask(123, Task-xyz)
XYZ.outputTaskDetails() 在上面的代码中id 和 label 数据成员都是直接存储在 XYZ 上在委托行为中我们会尽量避免在 [[Prototype]] 链的不同级别中使用相同的命名否则就需要使用笨拙并且脆弱的语法来消除引用歧义。你无法在两个或两个以上互相(双向)委托的对象之间创建循环委托。 其实对象关联的风格更容易理解而原型模式反而像是为了“模拟类”而出现的风格。直接通过new操作符来执行函数的内容同时将对象的原型链接到函数的prototype。instanceof 专门用来检查通过这个方法创建对象后两这的关联。 理解了这本书讲的内容其实这张图也不是很难看懂…… Function.prototype Function.__proto__ Object.__proto__
Function.prototype.__proto__ Function.__proto__.__proto__ Object.__proto__.__proto__ Object.prototypeObject.prototype.__proto__ null // Object.prototype 是对象Function.prototype.prototype undefined // Function.prototype 是函数 转载于:https://www.cnblogs.com/wenruo/p/9329352.html
