最近很多小伙伴都在问JavaScript继承方式详解和javascript的继承这两个问题，那么本篇文章就来给大家详细解答一下，同时本文还将给你拓展AndroidWebview和Javascript交
最近很多小伙伴都在问JavaScript 继承方式详解和javascript的继承这两个问题，那么本篇文章就来给大家详细解答一下，同时本文还将给你拓展Android Webview 和 Javascript 交互，实现 Android 和 JavaScript 相互调用、href=“javascript:”vs href=“javascript:void(0)”、JavaScript - 基础入门.0002.JavaScript 快速使用、JavaScript .prototype 如何工作？ - How does JavaScript .prototype work?等相关知识，下面开始了哦！
本文目录一览：- JavaScript 继承方式详解（javascript的继承）
- Android Webview 和 Javascript 交互，实现 Android 和 JavaScript 相互调用
- href=“javascript:”vs href=“javascript:void(0)”
- JavaScript - 基础入门.0002.JavaScript 快速使用
- JavaScript .prototype 如何工作？ - How does JavaScript .prototype work?
JavaScript 继承方式详解（javascript的继承）
JavaScript 继承方式的概念
js 中实现继承有两种常用方式：
原型链继承（对象间的继承）
类式继承（构造函数间的继承）JavaScript不是真正的面向对象的语言，想实现继承可以用JS的原型prototype机制或者call和apply方法
在面向对象的语言中，可以使用类来创建一个自定义对象，当然ES6中也引入了class来创建类。在这之前，我们需要使用js的原型来创建自定义对象。
原型继承与类继承
类继承是在子类型构造函数的内部调用父类型的构造函数
function Super (){
this.colors = ["blue","red"];
}
function Sub () {
Super.call(this);
}
原型式继承是借助已有的对象创建新的对象，将子类的原型指向父类。
function Super (id) {
this.id = id;
}
Super.prototype.toString = function () {
return ''Super'' + this.id;
}
function Sub (id) {
this.id = id;
}
Sub.prototype = new Super(); // 这句即原型式继承的核心代码
原型链继承
为了让子类继承父类的属性和方法，首先需要定义一个构造函数，然后将父类的实例赋值给构造函数的原型。
function Parent () {
this.name = ''Parent'';
}
function Child () {
this.age = 10;
}
Chid.prototype = new Parent(); // Chid继承Parent,形成原型链
var test = new Child();
console.log(test.name) // Parent
console.log(test.age) // 10 得到被继承的属性
// 继续原型链继承
function Brother () {
this.weight = 60;
}
Brother.prototype = new Child();
var peter = new Brother();
console.log(peter.name) //继承了Child和Parent,输出Parent
console.log(peter.age) // 输出10所有的构造函数都继承自Object,它是自动完成继承的并不需要我们手动继承，那么接着看它们的从属关系
确定原型和实例的关系
可以通过两种方式确定原型和实例的关系，通过操作符instanceof和isPrototypeof()方法
console.log(peter instanceof Object); //true
console.log(test instanceof Brother) //false,test是brother的父类
console.log(peter instanceof Child) //true
console.log(peter instanceof Parent) //true只要是原型链中出现过的原型，都可以说是改原型链派生的实例的原型。因此，isProtptypeof()方法也会返回true
在JS中，被继承的函数成为父类（或者 基类、超类），继承的函数成为子类（派生类）。使用原型继承主要有两个问题，一是字面量重写原型会中断关系，使用引用类型的原型，并且子类型无法给父类型传递参数。
伪类解决引用共享和超类型无法传参的问题，我们可以采用''类式继承''的方式
类式继承(借用构造函数)
function Parent (age) {
this.colors = ["blue","red","green"];
this.age = age;
}
function Child (age) {
Parent.call(this,age);
}
var peter = new Child(20);
console.log(peter.age) //20
console.log(peter.colors) //blue,red,green
peter.colors.push("white");
console.log(peter.colors) //blue,red,green,white
借用构造函数虽然解决了上面两张问题，但没有原型，所以我们需要原型链+借用构造函数的模式，这种模式成为组合继承
组合继承
function Parent (age) {
this.colors = ["blue","red","green"];
this.age = age;
}
Parent.prototype.run = function () {
return this.colors + '' is '' +this.age;
}
function Child (age) {
Parent.call(this,age); //对象冒充，给父类型传参
}
Child.prototype = new Parent(); //原型链继承
var peter = new Child(20);
console.log(peter.run()); //blue,red,green is 20组合继承是一种比较常用的方法，思路是使用原型链实现对原型属性和方法的继承，借用构造函数来实现对实例属性的继承。这样，既实现了原型上定义方法的函数复用，又保证每个实例都有自己的属性。
call()与apply()的用法：调用一个对象的一个方法，用另一个对象替换当前对象。
call(thisObj,Object); // call接收一个对象
apply(thisObj，[argArray]) //apply接收一个数组原型式继承
这种继承借助原型并基于已有的对象创建新的对象，同时还不用创建自定义类型的方式成为原型式继承
function obj(o) {
function F() {}
F.prototype = o;
return new F();
}
var box = {
name : ''peter'',
arr : [''blue'',''red'',''green'']
};
var b1 = obj(box);
console.log(b1.name) // peter
b1.name = ''jack'';
console.log(b1.name) //jack
console.log(b1.arr) //blue,red,green
b1.arr.push(''white'') //blue,red,green,white
var b2 = obj(box);
console.log(b2.name) // peter
console.log(b1.arr) //blue,red,green原型式继承首先在obj()函数内部创建一个临时性的构造函数，然后将传入的对象作为这个构造函数的原型，最后返回这个临时类型的新实例。
寄生式继承
这种继承方式是把原型式+工厂模式结合起来，目的是为了封装创建的过程。
function create(o){
var f = obj(o);
f.run = function () {
return this.arr;//同样，会共享引用
};
return f;
}组合式继承的问题
组合式继承是JS最常用的继承模式，但组合继承的父类型会在使用过程中被调用两次，一次是创建子类型的时候，另一次是在子类型构造函数的内部
function Parent(name){
this.name = name;
this.arr = [''哥哥'',''妹妹'',''父母''];
}
Parent.prototype.run = function () {
return this.name;
};
function Child(name,age){
Parent.call(this,age);//第二次调用
this.age = age;
}
Child.prototype = new Parent();//第一次调用以上代码是组合继承，那么寄生组合继承解决了两次调用的问题
寄生组合继承
function obj() {
function F() {}
F.prototype = o;
return new F();
}
function create(parent,test) {
var f = obj(parent.prototype); //创建对象
f.constructor = test; //增强对象
}
function Parent(name){
this.name = name;
this.arr = [''brother'',''sister'',''parents''];
}
Parent.prototype.run = function () {
return this.name;
};
function Child(name,age){
Parent.call(this,name);
this.age =age;
}
inheritPrototype(Parent,Child); //通过这里实现继承
var test = new Child(''peter'',20);
test.arr.push(''new'');
console.log(test.arr); //brother,sister,parents,new
console.log(test.run()); //只共享了方法
var test2 = new Child(''jack'',22);
console.log(test2.arr); //引用问题解决
call和apply
call和apply可以用来改变函数中this的指向:
// 定义一个全局函数
function f () {
console.log(this.name);
}
// 定义一个全局变量
var name = ''peter'';
var obj = {
name: ''jack'';
};
f.apply(window); //apple, 此时this 等于window 相当于window.f()
f.apply(obj); //jack, 此时this === obj 相当于obj.f()
Android Webview 和 Javascript 交互，实现 Android 和 JavaScript 相互调用
在 Android 的开发过程中、遇到一个新需求、那就是让 Java 代码和 Javascript 代码进行交互、在 IOS 中实现起来很麻烦、而在 Android 中相对来说容易多了、Android 对这种交互进行了很好的封装、我们可以很简单的用 Java 代码调用 WebView 中的 js 函数、也可以用 WebView 中的 js 来调用 Android 应用中的 Java 代码。
案例主要包含了：
- Html 中调用 Android 方法
- Android 调用 JS 方法无参数
- Android 调用 JS 方法有参数
- Android 调用 JS 方法有参数且有返回值处理方式 1
- Android 调用 JS 方法有参数且有返回值处理方式 2（Android4.4 以上）
1：创建 JS 对象
webView.addJavascriptInterface(new JsInterface(), "obj");public class JsInterface {
//JS中调用Android中的方法 和返回值处理的一种方法
/****
* Html中的点击事件 onclick
* <input type="button" value="结算" onclick="showToast(''12'')">
* @param toast
*/
@JavascriptInterface
public void showToast(String toast) {
Toast.makeText(MainActivity.this, "你的商品价格是：￥"+toast, Toast.LENGTH_SHORT).show();
}
} function showToast(toast) {
var money=toast*3;
javascript:obj.showToast(money);
}2：
webView.loadUrl("javascript:funFromjs()");function funFromjs(){
document.getElementById("helloweb").innerHTML="div显示数据,无参数";
}3：
webView.loadUrl("javascript:funJs(''Android端传入的信息，div标签中显示,含参数'')");function funJs(msg){
document.getElementById("hello2").innerHTML=msg;
}4：
webView.loadUrl("javascript:sum(6,6)");/***
* Android代码调用获取J是中的返回值
*
* @param result
*/
@JavascriptInterface
public void onSum(int result) {
Toast.makeText(MainActivity.this, "Android调用JS方法且有返回值+计算结果=="+result, Toast.LENGTH_SHORT).show();
} function sum(i,m){
var result = i*m;
document.getElementById("h").innerHTML= "Android调用JS方法且有返回值--计算结果="+result;
javascript:obj.onSum(result)
} 5：
webView.evaluateJavascript("sumn(6,11)", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
Toast.makeText(MainActivity.this, "返回值"+value, Toast.LENGTH_SHORT).show();
}
});function sumn(i,m){
var result = i*m;
document.getElementById("hh").innerHTML= "Android调用JS方法且有返回值--计算结果="+result;
return result;
} 注意：
1、Java 调用 js 里面的函数、效率并不是很高、估计要 200ms 左右吧、做交互性很强的事情、这种速度很难让人接受、而 js 去调 Java 的方法、速度很快、50ms 左右、所以尽量用 js 调用 Java 方法
2、Java 调用 js 的函数、没有返回值、调用了就控制不到了
3、Js 调用 Java 的方法、返回值如果是字符串、你会发现这个字符串是 native 的、转成 locale 的才能正常使用、使用 toLocaleString () 函数就可以了、不过这个函数的速度并不快、转化的字符串如果很多、将会很耗费时间
4、网页中尽量不要使用 jQuery、执行起来需要 5-6 秒、最好使用原生的 js 写业务脚本、以提升加载速度、改善用户体验。
注：使用的是本地的 Html 文件，不过在网络链接的 Html 文件也是可以实现的。
源码点击下载
href=“javascript:”vs href=“javascript:void(0)”
##href=“javascript:” vs href=“javascript:void(0)”
可参考
http://www.jb51.net/article/37904.htm
http://stackoverflow.com/questions/3666683/href-javascript-vs-href-javascriptvoid0
JavaScript - 基础入门.0002.JavaScript 快速使用
常用属性:
| 属性名称 | 属性说明 |
| src | 表示包含要执行代码的外部文件，常用来引用外部的 js 文件 |
| type | 表示代码使用的脚本语言的内容类型 |
| 1 2 3 4 5 6 7 8 9 10 11 12 |
|
注意事项:
1. 如果你想弹出一个 </script> 标签的字符串，内部 js 会误解成 Js 代码的结束，可通过 + 连接分解 </script > 将字符串分为两个部分，但是外部引用的 js 是无需加号拼接的
| 1 2 3 4 5 6 7 8 9 10 11 12 |
|
2. Js 代码越来越庞大时，最好把它另存为一个.js 文件，通过 src 来引用，这样具有维护性高，可缓存 (加载一次，无需加载), 方便未来扩展的特点
| 1 2 3 4 5 6 7 8 9 10 |
|
3. 对于不支持 JavaScript 平稳的处理方式是通过 <noscript></noscript > 实现？
| 1 2 3 4 5 6 7 8 9 10 11 |
|
登录乐搏学院官网 http://www.learnbo.com/
或关注我们的官方微博微信，还有更多惊喜哦～
本文出自 “满满李 - 运维开发之路” 博客，请务必保留此出处 http://xmdevops.blog.51cto.com/11144840/1846116
JavaScript .prototype 如何工作？ - How does JavaScript .prototype work?
问题：
I''m not that into dynamic programming languages but I''ve written my fair share of JavaScript code. 我不喜欢动态编程语言，但是我写了相当一部分 JavaScript 代码。 I never really got my head around this prototype-based programming, does any one know how this works? 我从来没有真正了解过这种基于原型的编程，有人知道它是如何工作的吗？
var obj = new Object();
obj.prototype.test = function() { alert(''Hello?''); };
var obj2 = new obj();
obj2.test();
I remember a lot discussion I had with people a while back (I''m not exactly sure what I''m doing) but as I understand it, there''s no concept of a class. 我记得很久以前与人们进行过多次讨论（我不确定自己在做什么），但是据我了解，这里没有一个课堂的概念。 It''s just an object, and instances of those objects are clones of the original, right? 这只是一个对象，这些对象的实例是原始对象的副本，对吗？
But what is the exact purpose of this ".prototype" property in JavaScript? 但是，此 “.prototype” 属性在 JavaScript 中的确切目的是什么？ How does it relate to instantiating objects? 它与实例化对象有何关系？
Update: correct way 更新：正确的方法
var obj = new Object(); // not a functional object
obj.prototype.test = function() { alert(''Hello?''); }; // this is wrong!
function MyObject() {} // a first class functional object
MyObject.prototype.test = function() { alert(''OK''); } // OK
Also these slides really helped a lot. 这些幻灯片也确实起到了很大作用。
解决方案：
参考一： https://stackoom.com/question/2P2H/JavaScript-prototype 如何工作参考二： https://oldbug.net/q/2P2H/How-does-JavaScript-prototype-work
今天的关于JavaScript 继承方式详解和javascript的继承的分享已经结束，谢谢您的关注，如果想了解更多关于Android Webview 和 Javascript 交互，实现 Android 和 JavaScript 相互调用、href=“javascript:”vs href=“javascript:void(0)”、JavaScript - 基础入门.0002.JavaScript 快速使用、JavaScript .prototype 如何工作？ - How does JavaScript .prototype work?的相关知识，请在本站进行查询。
本文标签：
![[转帖]Ubuntu 安装 Wine方法（ubuntu如何安装wine）](https://www.gvkun.com/zb_users/cache/thumbs/4c83df0e2303284d68480d1b1378581d-180-120-1.jpg)
